使用光标事件缩放图像的选定部分
我有这个jsfiddle： http ： //jsfiddle.net/seekpunk/JDU9f/1/
我想要的是当用户进行选择时，所选部分被放大。无论如何要实现这一点吗？
到目前为止这是代码：
var canvas = document.getElementById("MyCanvas"); var ctx = canvas.getContext('2d'), w = canvas.width, h = canvas.height, x1, y1, isDown = false; var img = new Image(); img.src = "http://sofzh.miximages.com/javascript/female-chaffinch-free-stock-photo-106202.jpg"; canvas.onmousedown = function (e) { var rect = canvas.getBoundingClientRect(); x1 = e.clientX - rect.left; y1 = e.clientY - rect.top; isDown = true; } canvas.onmouseup = function () { isDown = false; } canvas.onmousemove = function (e) { if (!isDown) return; var rect = canvas.getBoundingClientRect(), x2 = e.clientX - rect.left, y2 = e.clientY - rect.top; ctx.clearRect(0, 0, w, h); ctx.drawImage(img, 0, 0, w, h); ctx.strokeRect(x1, y1, x2 - x1, y2 - y1); } img.onload = function () { ctx.drawImage(img, 0, 0, w, h); }; 我可以进行选择，但我如何才能缩放所选部分？ 像这个例子： http ： //canvasjs.com/docs/charts/basics-of-creating-html5-chart/zooming-panning/
对于那些在不使用canvas的情况下寻求缩放function的人来说 ，使用简单的
$(window).on("load",function() { //VARS=================================================== var zoom = { zoomboxLeft:null, zoomboxTop:null, //zoombox cursorStartX:null, cursorStartY:null, //cursor imgStartLeft:null, imgStartTop:null, //image minDragLeft:null,maxDragLeft:null, minDragTop:null,maxDragTop:null }; //KEY-HANDLERS=========================================== $(document).keydown(function(e) { if (e.which==32) {e.preventDefault(); if (!$(".zoombox img").hasClass("moving")) {$(".zoombox img").addClass("drag");}} //SPACE }); $(document).keyup(function(e) { if (e.which==32) {if (!$(".zoombox img").hasClass("moving")) {$(".zoombox img").removeClass("drag");}} //SPACE }); //RESET IMAGE SIZE======================================= $(".reset").on("click",function() { var zoombox = "#"+$(this).parent().attr("id")+" .zoombox"; $(zoombox+" img").css({"left":0, "top":0, "width":$(zoombox).width(), "height":$(zoombox).height()}); }).click(); //ZOOM&DRAG-EVENTS======================================= //MOUSEDOWN---------------------------------------------- $(".zoombox img").mousedown(function(e) { e.preventDefault(); $(".zoombox img").addClass("moving"); var selector = $(this).next(); var zoombox = $(this).parent(); $(zoombox).addClass("active"); //store zoombox left&top zoom.zoomboxLeft = $(zoombox).offset().left + parseInt($(zoombox).css("border-left-width").replace(/\D+/,"")); zoom.zoomboxTop = $(zoombox).offset().top + parseInt($(zoombox).css("border-top-width").replace(/\D+/,"")); //store starting positions of cursor (relative to zoombox) zoom.cursorStartX = e.pageX - zoom.zoomboxLeft; zoom.cursorStartY = e.pageY - zoom.zoomboxTop; if ($(".zoombox img").hasClass("drag")) { //store starting positions of image (relative to zoombox) zoom.imgStartLeft = $(this).position().left; zoom.imgStartTop = $(this).position().top; //set drag boundaries (relative to zoombox) zoom.minDragLeft = $(zoombox).width() - $(this).width(); zoom.maxDragLeft = 0; zoom.minDragTop = $(zoombox).height() - $(this).height(); zoom.maxDragTop = 0; } else { //set drag boundaries (relative to zoombox) zoom.minDragLeft = 0; zoom.maxDragLeft = $(zoombox).width(); zoom.minDragTop = 0; zoom.maxDragTop = $(zoombox).height(); //activate zoom-selector $(selector).css({"display":"block", "width":0, "height":0, "left":zoom.cursorStartX, "top":zoom.cursorStartY}); } }); //MOUSEMOVE---------------------------------------------- $(document).mousemove(function(e) { if ($(".zoombox img").hasClass("moving")) { if ($(".zoombox img").hasClass("drag")) { var img = $(".zoombox.active img")[0]; //update image position (relative to zoombox) $(img).css({ "left": zoom.imgStartLeft + (e.pageX-zoom.zoomboxLeft)-zoom.cursorStartX, "top": zoom.imgStartTop + (e.pageY-zoom.zoomboxTop)-zoom.cursorStartY }); //prevent dragging in prohibited areas (relative to zoombox) if ($(img).position().left <= zoom.minDragLeft) {$(img).css("left",zoom.minDragLeft);} else if ($(img).position().left >= zoom.maxDragLeft) {$(img).css("left",zoom.maxDragLeft);} if ($(img).position().top <= zoom.minDragTop) {$(img).css("top",zoom.minDragTop);} else if ($(img).position().top >= zoom.maxDragTop) {$(img).css("top",zoom.maxDragTop);} } else { //calculate selector width and height (relative to zoombox) var width = (e.pageX-zoom.zoomboxLeft)-zoom.cursorStartX; var height = (e.pageY-zoom.zoomboxTop)-zoom.cursorStartY; //prevent dragging in prohibited areas (relative to zoombox) if (e.pageX-zoom.zoomboxLeft <= zoom.minDragLeft) {width = zoom.minDragLeft - zoom.cursorStartX;} else if (e.pageX-zoom.zoomboxLeft >= zoom.maxDragLeft) {width = zoom.maxDragLeft - zoom.cursorStartX;} if (e.pageY-zoom.zoomboxTop <= zoom.minDragTop) {height = zoom.minDragTop - zoom.cursorStartY;} else if (e.pageY-zoom.zoomboxTop >= zoom.maxDragTop) {height = zoom.maxDragTop - zoom.cursorStartY;} //update zoom-selector var selector = $(".zoombox.active .selector")[0]; $(selector).css({"width":Math.abs(width), "height":Math.abs(height)}); if (width<0) {$(selector).css("left",zoom.cursorStartX-Math.abs(width));} if (height<0) {$(selector).css("top",zoom.cursorStartY-Math.abs(height));} } } }); //MOUSEUP------------------------------------------------ $(document).mouseup(function() { if ($(".zoombox img").hasClass("moving")) { if (!$(".zoombox img").hasClass("drag")) { var img = $(".zoombox.active img")[0]; var selector = $(".zoombox.active .selector")[0]; if ($(selector).width()>0 && $(selector).height()>0) { //resize zoom-selector and image var magnification = ($(selector).width()<$(selector).height() ? $(selector).parent().width()/$(selector).width() : $(selector).parent().height()/$(selector).height()); //go for the highest magnification var hFactor = $(img).width() / ($(selector).position().left-$(img).position().left); var vFactor = $(img).height() / ($(selector).position().top-$(img).position().top); $(selector).css({"width":$(selector).width()*magnification, "height":$(selector).height()*magnification}); $(img).css({"width":$(img).width()*magnification, "height":$(img).height()*magnification}); //correct for misalignment during magnification, caused by size-factor $(img).css({ "left": $(selector).position().left - ($(img).width()/hFactor), "top": $(selector).position().top - ($(img).height()/vFactor) }); //reposition zoom-selector and image (relative to zoombox) var selectorLeft = ($(selector).parent().width()/2) - ($(selector).width()/2); var selectorTop = ($(selector).parent().height()/2) - ($(selector).height()/2); var selectorDeltaLeft = selectorLeft - $(selector).position().left; var selectorDeltaTop = selectorTop - $(selector).position().top; $(selector).css({"left":selectorLeft, "top":selectorTop}); $(img).css({"left":"+="+selectorDeltaLeft, "top":"+="+selectorDeltaTop}); } //deactivate zoom-selector $(selector).css({"display":"none", "width":0, "height":0, "left":0, "top":0}); } else {$(".zoombox img").removeClass("drag");} $(".zoombox img").removeClass("moving"); $(".zoombox.active").removeClass("active"); } }); });
/*CONTAINER-------------------*/ #container { width: 234px; height: 199px; margin-left: auto; margin-right: auto; } /*ZOOMBOX=====================*/ /*IMAGE-----------------------*/ .zoombox { position:relative; width: 100%; height: 100%; border: 2px solid #AAAAAA; background-color: #666666; overflow: hidden; } .zoombox img {position:relative;} .zoombox img.drag {cursor:move;} .zoombox .selector { display: none; position: absolute; border: 1px solid #999999; background-color: rgba(255,255,255, 0.3); } /*CONTROL---------------------*/ .reset {float:left;} .info {float:right;}
Press SPACE to drag