Question

我正在使用画布将2张图片相互绘制。但是有点击事件。我想把这张被点击在第一张图片上的图片保存起来。

我收到了这个错误： TypeError: Argument 1 of CanvasRenderingContext2D.drawImage could not be converted to any of: HTMLImageElement, HTMLCanvasElement, HTMLVideoElement

这是我的代码：

 window.onload = function() {
            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");
            var img = document.getElementById("background");
            ctx.drawImage(img, 10, 10);
   
    $('body').on('click', '.add-image', function () {
                var src = $(this).attr('src');

                var bomb = document.getElementById("add-image");
             

                ctx.drawImage(bomb, 50, 50);
     }
                 
 }

<canvas id="myCanvas" width="900" height="1100"
                            style="border:1px solid #d3d3d3;">
                        Your browser does not support the HTML5 canvas tag.
                    </canvas>

                    <div id="background-image-holder">
                       <span style="display:none;">
                        <img src="<?php echo $path;?>" class="background" id="background">
                        
                    </div>
                      
                       <?php if(!empty($images)) { foreach($images as $image) { echo $images;  ?>
                                <div >
                                    <img src="<?php echo $image_path . $image['image'];?>" class="add-image" id"add-image">
                                </div>
                            <?php } } ?>

编辑：如何使用Ajax保存图像？我尝试了以下但没有图像：我做到了，我已经覆盖了画布变量。：）

 var dataURL = canvas.toDataURL("image/png");
  console.log(dataURL);
  $.ajax({
      type: "POST",
                                  
      url: "<?php echo URL::base();?>images/upload",
      data: {data: dataURL},
      success: function (data) {
          console.log(data);
                                         
      }
});

如何绘制使用canvas单击的图像并使用Ajax保存它

0 个答案: