鼠标   1.操作canvas 中的 img。 右键放大缩小，左键移动img。 

　　　2.拖动input type= range  改变图片的透明度

html 代码 

js 代码

/** * Created by Administrator on 2018/7/6. */function doNothing() {    window.event.returnValue = false;    return false;}var imgX = 0;var imgY = 0;var imgScale = 1;var val = 0;window.onload = function (event) {    var count = [        {cas2: 'cas1', box2: '#box1,#box2', path: './2.jpg', callback: imgOnload_callbak, scale: methods,icon_img:'./4.jpg,./5.jpg',inp_id:'#inp_d,#inp_d'},        {cas2: 'cas2', box2: '#box1,#box2,',path: './3.jpg', callback: imgOnload_callbak, scale: methods,icon_img:'./5.jpg,./4.jpg',inp_id:'#inp_d,#inp_d'}    ];    for (var i = 0; i < count.length; i++) {        getElement(count[i].cas2, count[i].box2, count[i].path, count[i].callback, count[i].scale,count[i].icon_img,count[i].inp_id)    }};function getElement(cas_id, box_id, img_src, imgOnload_call, methods,icon_img,inp_id) {    var canvas = document.getElementById(cas_id);    var box = document.getElementById(box_id);    var arr = box_id.split(',');    var context = canvas.getContext('2d');    var img = new Image();    var img1 = new Image();    var img1_arr = icon_img.split(',');    img.src = img_src;    for(var i = 0; i < img1_arr.length;i++){        img1.src = img1_arr[i];    }    imgOnload_call(img, context, canvas, img1);    methods(arr, canvas, context, img,img1);    inp_methods(inp_id,context,canvas,img,img1)}function imgOnload_callbak(img,context,canvas,img1) {    img.onload = function () {        context.globalAlpha = 1.0;        context.drawImage(img, 0, 0);    };    img1.onload = function (){        setTimeout(function(){            context.globalAlpha = 0;            context.drawImage(img1,0,0,img1.width,img1.height,0,0,img1.width,img1.height);        },50);    }}function methods(elements, canvas, context, img,img1) {    var img_y = 1;    elements.forEach(function (item, i) {        $(item).mousedown(function (event) {            console.log(val);            var e_btn = event.button;            if (e_btn == 2) {                var e_down_y = event.clientY;                $(item).mousemove(function (event) {                    var e_move_y = event.clientY;                    if (e_move_y < e_down_y) {                        img_y *= 1.01;                    } else {                        img_y /= 1.01;                    }                    e_down_y = e_move_y;                    img_y = (img_y > 1) ? img_y : 1;                    canvas.style.transform = "scale(" + img_y + "," + img_y + ")"                });                $(item).mouseup(function () {                    $(item).unbind('mousemove');                    $(item).unbind('mouseup');                })            }            else if (e_btn == 0) {                var e_drag_down = {                    x: event.clientX,                    y: event.clientY                };                $(item).mousemove(function (event) {                    var e_drag_move = {                        x: event.clientX,                        y: event.clientY                    };                    var e_drag_distance = {                        x: e_drag_move.x - e_drag_down.x,                        y: e_drag_move.y - e_drag_down.y                    };                    e_drag_down = e_drag_move;                    imgX += e_drag_distance.x;                    imgY += e_drag_distance.y;                    context.clearRect(0, 0, canvas.width, canvas.height);                    context.globalAlpha = 1.0;                    context.drawImage(img, 0, 0, img.width, img.height, (imgX / 5), (imgY / 5), img.width * imgScale, img.height * imgScale);                    context.globalAlpha = val;                    context.drawImage(img1, 0, 0, img1.width, img1.height, (imgX / 5), (imgY / 5), img1.width * imgScale, img1.height * imgScale);                });                $(item).mouseup(function () {                    $(item).unbind("mousemove");                    $(item).unbind('mouseup');                })            }        })    })}function inp_methods(inp_id,context,canvas,img,img1){    var inp_id_arr = inp_id.split(',');    inp_id_arr.forEach(function(item,i){        $(item).on('input propertychange',function(){            val = $(item).val();            val = ( val < 0.1)? 0.1 : val/100;            context.clearRect(0,0,canvas.width,canvas.height);            context.globalAlpha = 1.0;            context.drawImage(img,0,0,img.width, img.height, (imgX / 5), (imgY / 5), img.width * imgScale, img.height * imgScale);            context.globalAlpha = val;            context.drawImage(img1,0,0,img1.width, img1.height, (imgX / 5), (imgY / 5), img1.width * imgScale, img1.height * imgScale);        })    });}

 有错误的地方，请大家帮忙 指正一下。谢谢！