I used this Resize image using javascript to use inside createPattern canvas to resize the original image, but when I try to put the same code in my drag / (it creates a new image, and when I try to drag it, it gets weird - see the image below. “O” has the image before drag / drop, “P” has the image after drag / drop).
Here is the code I'm using:
function photos_create_preview_image(element) { console.log(element.id); if(element.id.indexOf("canvas") != -1) { var canvas = document.getElementById(element.id); var ctx = canvas.getContext("2d"); var canvasOffset = $("#" + element.id).offset(); var offsetX = canvasOffset.left; var offsetY = canvasOffset.top; var isDown = false; var startX; var startY; var imgX = 0; var imgY = 0; var imgWidth, imgHeight; var mouseX, mouseY; var new_img = new Image(); new_img.onload = function() { var tempCanvas = photos_create_temp_canvas(new_img); imgWidth = new_img.width; imgHeight = new_img.height; //var pattern = ctx.createPattern(new_img, "no-repeat"); var pattern = ctx.createPattern(tempCanvas, "no-repeat"); ctx.fillStyle = pattern; ctx.fill(); }; new_img.src = SITE_URL + "/system/photo/cf_preview/" + selected_fid; function photos_create_temp_canvas(new_img) { var tempCanvas = document.createElement("canvas"), tCtx = tempCanvas.getContext("2d"); tempCanvas.width = new_img.width / 3; //TODO: Figure out what this should be, right now it is just a "magic number" tempCanvas.height = new_img.height / 3 ; tCtx.drawImage(new_img,0,0,new_img.width,new_img.height,0,0,new_img.width / 3,new_img.height / 3); return tempCanvas; } function handleMouseDown(e) { e.preventDefault(); startX = parseInt(e.pageX - window.scrollX); startY = parseInt(e.pageY - window.scrollY); if (startX >= imgX && startX <= imgX + imgWidth && startY >= imgY && startY <= imgY + imgHeight) { isDown = true; } } function handleMouseUp(e) { e.preventDefault(); isDown = false; } function handleMouseOut(e) { e.preventDefault(); isDown = false; } function handleMouseMove(e) { if (!isDown) { return; } e.preventDefault(); mouseX = parseInt(e.clientX - offsetX); mouseY = parseInt(e.clientY - offsetY); if (!isDown) { return; } imgX += mouseX - startX; imgY += mouseY - startY; startX = mouseX; startY = mouseY; var tempCanvas = photos_create_temp_canvas(new_img); var pattern = ctx.createPattern(tempCanvas, "no-repeat"); //var pattern = ctx.createPattern(new_img, "no-repeat"); ctx.save(); ctx.translate(imgX, imgY); ctx.fillStyle = pattern; ctx.fill(); ctx.restore(); } $("#" + element.id).mousedown(function (e) { handleMouseDown(e); }); $("#" + element.id).mousemove(function (e) { handleMouseMove(e); }); $("#" + element.id).mouseup(function (e) { handleMouseUp(e); }); $("#" + element.id).mouseout(function (e) { handleMouseOut(e); }); } else //You can ignore this - not relevant to the question { new_img = new Image(); new_img.onload = function() { this.width /= 3; //TODO: Figure out what this should be, right now it is just a "magic number" this.height /= 3; element.appendChild(new_img); $(new_img).draggable({ containment: "parent" }); }; new_img.src = SITE_URL + "/system/photo/cf_preview/" + selected_fid; } console.log("new image: " + new_img.src); }
I changed the code to:
... ctx.fillStyle = "#BFBFBF"; ctx.fill(); var tempCanvas = photos_create_temp_canvas(new_img); var pattern = ctx.createPattern(tempCanvas, "no-repeat"); ctx.save(); ctx.translate(imgX, imgY); ctx.fillStyle = pattern; ctx.fill(); ctx.restore(); ...
And this part works, but now it allows me to move the image from below. (See image below)
source share