Question

我花了一点时间来开发一个在画布上发布图像的脚本，如果我想，可以附加一个可拖动的div并将其合并到该画布中，最后，我可以将其下载为一个独特的图像（在画布中上传的第一个图像的子类型图像......第二个图像应该是可拖动div中包含的图像）。

因此，结果应该是单个下载的图像，其中包括与画布图像重叠的可拖动div的图像。我希望在我的描述中清楚明白。

我发布到目前为止脚本编写的代码，缺少最后一个操作...

<!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Draggable e Resizable- ETt.</title>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">

    <style>
    #draggable { width: 150px; height: 150px; padding: 0.5em; }
    #resizable { width: 150px; height: 150px; padding: 0.5em; }
    #resizable h3 { text-align: center; margin: 0; }
    </style>

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <script>
        $( function() {
         $('#file-input').change(function(e) {
        var file = e.target.files[0],
        imageType = /image.*/;
        if (!file.type.match(imageType))
         return;

        var reader = new FileReader();
        reader.onload = fileOnload;
        reader.readAsDataURL(file);

     });

function fileOnload(e) {
        var $img = $('<img>', { src: e.target.result });
        var canvas = $('#canvas')[0];
        var context = canvas.getContext('2d');

         $img.load(function() {
         context.drawImage(this, 0, 0);
     });
      }

     $('#draggable').draggable();
     $('#image').resizable();

    var canvas = document.getElementById('canvas'),
     ctx = canvas.getContext('2d');

    function downloadCanvas(link, canvasId, filename) {
       link.href = document.getElementById(canvasId).toDataURL();
      link.download = filename;
        }

    document.getElementById('download').addEventListener('click', function() {
    downloadCanvas(this, 'canvas', 'test.png');
    }, false);

  } );

</script>
</head>
<body>

<div id="draggable"  style="display:inline-block" >
<img id="image" src="picexample.png" /> 
</div><br> 
<input type="file" id="file-input"><br><br> <a id="download">Download as image</a>
<br><br>
<canvas id="canvas" width="500px" height="500px"></canvas>
<br><br>
<br>
</body>
</html>

如何在预先存在的画布中接管可拖动图像以创建新图像

0 个答案: