将base64值设置为输入类型=“文件”

Question

您好，

我真的有一个大问题。我正在使用simplecropper，我成功地在div框中获取预览图像。此图像具有base64编码的src。

我的问题：我可以以某种方式“复制”div框的图像并将其设置为文件属性的输入值吗？

这必须兼容：

        <div class="cropme" style="width: 405px; height: 200px;"></div>      
        <input type="file" id="{$field->idattr}" name="{$field->nameattr}" />   

i.m.o。重要的Javascript：

        // Add image to dropbox element
                dropbox.appendChild(current_image);
            }

            reader.readAsDataURL(file);
        } else {
            dropbox.innerHTML = "File not supported!";
        }
    }

    function showCoords(c) {
        x1 = c.x;
        y1 = c.y;
        x2 = c.x2;
        y2 = c.y2;
    }

    function preview() {
        // Set canvas
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');

        // Delete previous image on canvas
        context.clearRect(0, 0, canvas.width, canvas.height);

        // Set selection width and height
        var sw = x2 - x1;
        var sh = y2 - y1;


        // Set image original width and height
        var imgWidth = current_image.naturalWidth;
        var imgHeight = current_image.naturalHeight;

        // Set selection koeficient
        var kw = imgWidth / $("#preview").width();
        var kh = imgHeight / $("#preview").height();

        // Set canvas width and height and draw selection on it
        canvas.width = aspX;
        canvas.height = aspY;
        context.drawImage(current_image, (x1 * kw), (y1 * kh), (sw * kw), (sh * kh), 0, 0, aspX, aspY);

        // Convert canvas image to normal img
        var dataUrl = canvas.toDataURL();
        var imageFoo = document.createElement('img');
        imageFoo.src = dataUrl;

        // Append it to the body element
        $('#preview').delay(100).hide();
        $('#modal').hide();
        file_display_area.html('');
        file_display_area.append(imageFoo);

        if (onComplete) onComplete(
            {                    
                "original": { "filename": image_filename, "base64": original_data, "width": current_image.width, "height": current_image.height },
                "crop": { "x": (x1 * kw), "y": (y1 * kh), "width": (sw * kw), "height": (sh * kh) }
            }
           );
    }