Question

基本上我在div区域粘贴图像。这些图像是可拖动和可调整大小的。编辑图像后，我需要将最终内容保存到最终图像中。

我已经完成了需要粘贴，调整大小和拖动图像的部分。剩下的部分是将这些内容保存在一张图片中。

Canvas似乎是可行的解决方案。但是div需要转换为画布。怎么办？

这是代码：

这是代码

$(function () {
    $("#editor-box").bind("paste", function (ev) {
    var $this = $(this);
    var original = ev.originalEvent;
    var file = original.clipboardData.items[0].getAsFile();
    var reader = new FileReader();
    reader.onload = function (evt) {
    var result = evt.target.result;

    var arr = result.split(",");
    var data = arr[1]; // raw base64
    var contentType = arr[0].split(";")[0].split(":")[1];

    // this needs to post to a server route that can accept raw base64 content and save to a file
    $.post("/echo/html/", {
    contentType: contentType,
    data: data
    });
    $this.append("");
};  
    reader.readAsDataURL(file);
});

}); 

   $(document).ready(function() {
   $("#editbutton").click(function(){
     var val = 0;
     $("img").each(function () {            
         $(this).attr('id', 'img' + val);   
         $('#img' + val).resizable().parent().draggable();                          
         val = val+1; 
     });
 }); 


 $("#savebutton").click(function(){
     /*need to convert the HTML to Canvas and then save the image. OR directly have the div contents saved as  image*/
 }); 


 });

</script>
</head>
<body>
<div id="editor-box" contenteditable="true">
</div>
<div><input type="button" id="editbutton" value="drag"  /></div>
<div><input type="button" id="savebutton" value="save"  /></div>
</body>

将div的内容保存到图像

0 个答案: