使用fabric.js在画布容器中拖放后的图像缩放问题答案

【问题标题】：Image scaling issue after drag and drop in canvas container using fabric.js使用fabric.js在画布容器中拖放后的图像缩放问题
【发布时间】：2020-11-04 14:30:36
【问题描述】：

我必须将左侧容器图像拖到画布中的右侧容器，但是在画布中拖放后的图像从左侧图像的原始分辨率被裁剪掉。如何在画布中获取完整图像？

function handleDrop(e) {
  e = e || window.event;
  if (e.preventDefault) {
    e.preventDefault();
  }
  if (e.stopPropagation) {
    e.stopPropagation();
  }

  // e.preventDefault();

  var img = document.querySelector(".image-container .image img.img_dragging");
  console.log("event", e);

  var offset = $(canvasObject).offset();
  var x = e.clientX - (offset.left + imageOffSetX);
  var y = e.clientY - (offset.top + imageOffSetY);

  var newImage = new fabric.Image(img, {
    width: img.width,
    height: img.height,
    left: x,
    top: y
    // scaleX: 0.25,
    // scaleY: 0.25,
  });

  canvas.add(newImage);
  return false;
}

enter image description here

【问题讨论】：

标签： javascript canvas drag-and-drop fabricjs

【解决方案1】：

花了 30 分钟 :) 希望这会对你有所帮助。

您不应该使用宽度和高度，而是根据cnavas的高度和宽度计算scaleX，ScaleY。

// canvas related variables
var canvas = new fabric.Canvas("canvas");

  var dragCordX = 0, dragCordY = 0;
  
  
function dragstart_handler (ev) {

console.log(ev.target.src);

fabric.Image.fromURL(ev.target.src, function(myImg) {

// here you can see how we can get height width of canvas and selected image. 
console.log(myImg.width, myImg.height, canvas.width, canvas.height)


let scaleX = (canvas.width-100) /myImg.width; 
let scaleY = (canvas.height-100)/myImg.height;



 var img1 = myImg.set({ 
 left: dragCordX,
 top: dragCordY ,
 scaleX:scaleX, 
 scaleY:scaleY});
 canvas.add(img1); 
});


}


canvas.on('dragover', async (options) => {
    dragCordX = options.e.layerX;
    dragCordY = options.e.layerY;
});

body {
    background-color:silver;
}
canvas {
    border:1px solid red;
    float:left
}

    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>

<h4>Original Image</h4>
<img draggable="true" width="100px" height="100px" onclick="dragstart_handler(event)" ondragend="dragstart_handler(event)" id="" src="https://i.stack.imgur.com/GL433.jpg" alt="">
 <div class="dropp">
<canvas id="canvas" width=300 height=300></canvas><br>
</div>

【讨论】：