小编Lon*_*han的帖子

在blob:url上混淆并将其转换为react-dropzone中的base64

我正在使用包react-dropzone(https://github.com/okonet/react-dropzone)从用户获取图像。用户上传了他们的图像,一切都很好,但是我只能从中得到“ blob:http // blahblah”之类的东西,我需要将图像设置为base64 png。

我的dropzone组件:

<Dropzone ref="dropzone" multiple={false} onDrop={this.onDrop.bind(this)} >
  {this.state.files ?<img className="img-responsive" src={this.state.files[0].preview}></img>
   : <div>Upload Photo</div> }
</Dropzone>
Run Code Online (Sandbox Code Playgroud)

以及获取blob网址的drop函数:

onDrop (files ) {
    if ( files.length === 0 ) {
        alert("upload img please")
        return;
    }
    console.log('Received files: ', files);
    this.setState({files:files})
    var blobURL = files[0].preview
    var reader = new FileReader();
    reader.readAsDataURL(blobURL)
  }
Run Code Online (Sandbox Code Playgroud)

我会得到一个错误:Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

我认为这是因为即时通讯试图传递指向blob的object-url,但是我在哪里可以获取blob以便转换为base64?

blob ecmascript-6 reactjs

2
推荐指数
1
解决办法
3747
查看次数

试图使一个带有复选框选项的React下拉列表正常工作

我正在尝试使用下拉菜单项作为复选框输入进行简单的下拉菜单。目前我有这个:

import React, { Component } from 'react'
export default class Sort extends Component {
  constructor() {
    super()
    this.state= { expanded : false}

  }
  showCheckboxes() {
      var checkboxes = document.getElementById("checkboxes");
      if (!expanded) {
          checkboxes.style.display = "block";
          this.state.expanded = true;
      } else {
          checkboxes.style.display = "none";
          this.state.expanded = false;
      }
  }
  render() {
    return (
      <form>
        <div class="multiselect">
            <div class="selectBox" onclick="showCheckboxes()">
                <select>
                    <option>Select an option</option>
                </select>
                <div class="overSelect"></div>
            </div>
            <div id="checkboxes">
                <label for="one"><input type="checkbox" id="one"/>First checkbox</label>
                <label for="two"><input type="checkbox" id="two"/>Second checkbox …
Run Code Online (Sandbox Code Playgroud)

checkbox drop-down-menu reactjs react-bootstrap

1
推荐指数
1
解决办法
8741
查看次数

Elastic Transcoder AWS,如何增加缩略图大小?

是否有一个键或什么东西可以用来设置视频即时转码中缩略图的高度和宽度?

transcodeVideo = (fileName, cb) ->
        elastictranscoder = new (AWS.ElasticTranscoder)(apiVersion: '2012-09-25')
        elastictranscoder.createJob {
          PipelineId: process.env.PIPELINE_ID
          OutputKeyPrefix: fileName + '/'
          Input:
            Key: fileName
            FrameRate: 'auto'
            Resolution: 'auto'
            AspectRatio: 'auto'
            Interlaced: 'auto'
            Container: 'auto'
          Output:
            Key: 'video.mp4'
            Resolution: 'auto'
            ThumbnailPattern: 'thumbs-{count}'
            PresetId: process.env.PRESET_ID
            Rotate: 'auto'
        }, cb
Run Code Online (Sandbox Code Playgroud)

amazon-s3 amazon-web-services node.js coffeescript

1
推荐指数
1
解决办法
647
查看次数