缩放用户上传的图像onclick按钮 [英] Zoom the user uploaded image onclick button
本文介绍了缩放用户上传的图像onclick按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
以下是放大和放大的基本代码。 out：
Codepen： https://codepen.io/kidsdial/pen/PgxegO
小提琴： https：// jsfiddle。 net / wdbmt54s /
var target; const imageUrl = HTTP s：//i.imgur.com/RzEm1WK.png;让jsonData = {layers：[{x：0，height：612，layers：[{x：160， src：ax0HVTs.png，y：291，height：296，width：429，name：mask_1}，{x：25，src：hEM2kEP。 png，height：324，width：471，y：22，name：mask_2}]，y：0，width：612}]}; const containerElement = $ （'#container'）; const fileUp = $（'＃fileup'）; $（function（）{//上传图片onclick mask image containerElement.click（function（e）{var res = e.target; target = res.id;的console.log（目标）; if（e.target.getContext）{//仅在非透明部分内部单击var pixel = e.target.getContext（'2d'）。getImageData（e.offsetX，e.offsetY，1,1）.data; if（pixel [3] === 255）{setTimeout（（）=> {$（'＃fileup'）。click（）;}，20）; }}}; //从json文件中获取掩码图像 - IGNORE此代码函数getAllSrc（layers）{let arr = []; layers.forEach（layer => {if（layer.src）{arr.push（{src：layer.src，x：layer.x，y：layer.y，height：layer.height，width：layer.width ，name：layer.name}）;} else if（layer.layers）{let newArr = getAllSrc（layer.layers）; if（newArr.length> 0）{newArr.forEach（（{src，x，y， height，width，name}）=> {arr.push（{src，x：（layer.x + x），y：（layer.y + y），height，width，name：（name）}）; }）; }}};返回函数json（data）{var width = 0; var height = 0; let arr = getAllSrc（data.layers）;让layer1 = data.layers; width = layer1 [0] .width; height = layer1 [0]。高; let counter = 0; let table = []; //容器尺寸containerElement.css（'width'，width +px）。css（'height'，height +px）。addClass（'temp'）; //结束（让{src，x，y，name} of arr）{//获取蒙版图像的高度和宽度 var ImagePosition = arr; // code end var mask = $（。container）。mask（{imageUrl：imageUrl，// Fetch Mask images maskImageUrl：'https://i.imgur.com/'+ src，// end onMaskImageCreate：function （img）{//掩码图像位置img.css（{position：绝对，左：x +px，top：y +px}）; // end}，id ：counter}）; table.push（掩模）; fileup.onchange = function（）{let mask2 = table [target]; const newImageLoadedId = mask2.loadImage（URL.createObjectURL（fileup.files [0]））; document.getElementById（'fileup'）。value =; //编辑图像 - IGNORE此代码if（$（。masked-img+ newImageLoadedId）。length === 1）{$（< span class = \pip pip+ newImageLoadedId +\ >+< a onclick ='document.getElementById（\dark+ newImageLoadedId +\）。style.display = \block \;'>< span class = \\ edit edit+ newImageLoadedId +\>编辑< / span>< / a>+< / span>）。insertAfter（。masked-img+ newImageLoadedId）.css（ {left：ImagePosition [newImageLoadedId] .x +（ImagePosition [newImageLoadedId] .width / 2）+px，top：ImagePosition [newImageLoadedId] .y +（ImagePosition [newImageLoadedId] .height / 2）+ px}）;; $（< div id = \'dark+ newImageLoadedId +\'class = \'dark_content \'>+ $（'＃demoTemplate'）。html（）+< a href = \javascript：void（0）\onclick = \document.getElementById（\'dark+ newImageLoadedId +\'）。style.display = \'none \'\ >关闭< / a>+< / div>）。appendTo（。pip+ newImageLoadedId）.css（{left：$（'。edit'+ newImageLoadedId）.width（）+ 2 +px，top：0px}）; } // 结束 };计数器++; json（jsonData）;}）; //函数结束//图像代码（函数（$）{var JQmasks = []; $ .fn.mask = function（options）{//这是获取默认选项的最简单方法.var settings = $ .extend （{//这些是默认值.maskImageUrl：undefined，imageUrl：undefined，scale：1，id：new Date（）。getUTCMilliseconds（）。toString（），x：0，// image start position y：0，/ / image start position onMaskImageCreate：function（div）{}，}，options）; var container = $（this）; let prevX = 0，prevY = 0，draggable = false，img，canvas，context，image，timeout，initImage = false，startX = settings.x，startY = settings.y，div; container.mousePosition = function（event）{return {x：event.pageX || event.offsetX，y：event.pageY || event.off setY}; } container.selected = function（ev）{var pos = container.mousePosition（ev）; var item = $（。masked-img canvas）。filter（function（）{var offset = $（this）.offset（）var x = pos.x - offset.left; var y = pos.y - offset .top; var d = this.getContext（'2d'）。getImageData（x，y，1,1）.data; return d [0]> 0}）; JQmasks.forEach（function（el）{var id = item.length> 0？$（item）.attr（id）：; if（el.id == id）el.item.enable（） ;否则el.item.disable（）;}）; }; container.enable = function（）{draggable = true; $（canvas）.attr（active，true）; div.css（{z-index：2}）; } container.disable = function（）{draggable = false; $（canvas）.attr（active，false）; div.css（{z-index：1}）; } container.getImagePosition = function（）{return {x：settings.x，y：settings.y，scale：settings.scale}; }; container.updateStyle = function（）{return new Promise（（resolve，reject）=> {context.beginPath（）; context.globalCompositeOperation =source-over; image = new Image（）; image.setAttribute（'crossOrigin '，'anonymous'）; image.src = settings.maskImageUrl; image.onload = function（）{canvas.width = image.width; canvas.height = image.height; context.drawImage（image，0,0，image .width，image.height）; div.css（{width：image.width，height：image.height}）; resolve（）;};}）; }; function renderInnerImage（）{img = new Image（）; img.setAttribute（'crossOrigin'，'anonymous'）; img.src = settings.imageUrl; img.onload = function（）{settings.x = settings.x == 0&& initImage？ （canvas.width - （img.width * settings.scale））/ 2：settings.x; settings.y = settings.y == 0&& initImage？ （canvas.height - （img.height * settings.scale））/ 2：settings.y; context.globalCompositeOperation ='source-atop'; context.drawImage（img，settings.x，settings.y，img.width * settings.scale，img.height * settings.scale）; initImage = false; }; } //更改可拖动图像container.loadImage = function（imageUrl）{console.log（load）; settings.y = startY; settings.x = startX; prevX = prevY = 0; settings.imageUrl = imageUrl; initImage = true; container.updateStyle（），然后（renderInnerImage）。 // sirpepole添加此返回settings.id; }; container.loadMaskImage = function（imageUrl，from）{canvas = document.createElement（canvas）; context = canvas.getContext（'2d'）; canvas.setAttribute（draggable，true）; canvas.setAttribute（id，settings.id）; settings.maskImageUrl = imageUrl; div = $（< div />，{class：masked-img}）。append（canvas）; // div.find（canvas）。on（'touchstart mousedown'，function（event）div.find（canvas）。on（'dragstart'，function（event）{if（event.handled === false）return; event.handled = true; container.onDragStart（event）;}）; div.find（canvas）。on（'touchend mouseup'，function（event）{if（event.handled === false） ）return; event.handled = true; container.selected（event）;}）; div.find（canvas）。bind（dragover，container.onDragOver）; container.append（div）; if（settings。 onMaskImageCreate）settings.onMaskImageCreate（div）; container.loadImage（settings.imageUrl）;}; container.loadMaskImage（settings.maskImageUrl）; JQmasks.push（{item：container，id：settings.id}）//编辑图像div .addClass（'masked-img'+ settings.id）; //结束回收容器; };}（jQuery））; //缩放document.getElementById（img）。src = json（data）; var angle = 0; var scale = 1; var $ img = $（'＃image'）; $ img.on（'transform'，function（）{$ img.css（'transform'，`rotate（$ {angle} deg）scale（$ {scale}）`）;}）; $（'。js-zoom -in'）。on（'click'，function（）{scale + = 0.25; if（scale == 2.25）{scale = 2;}; $ img.trigger（'transform'）;}）; $（' .js-zoom-out'）。on（'click'，function（）{scale - = 0.25; if（scale == 0）{scale = 0.25;} $ img.trigger（'transform'）;}）;
.container {background：silver;位置：相对; } .container img {position：absolute;顶部：0;底部：250px;左：0;右：0;保证金：自动; z-index：999;}。masked-img {overflow：hidden; position：relative;}。pip {display：inline-block;保证金：0; position：absolute;}。edit {display：block;背景：＃444;边框：1px纯黑色;白颜色; text-align：center;游标：指针;位置：绝对; z-index：3;}。编辑：悬停{background：white;颜色：黑色;位置：绝对; z-index：3;}。dark_content {display：none;位置：相对;最高：25％;左：25％;宽度：250px;身高：250px;填充：16px;边框：16px纯橙色;背景颜色：白色; z-index：1002; overflow：auto;}
< script src =https ：//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js>< / script>< input id =fileupname =fileuptype =file style =display：none>< div id =containerclass =container>< / div>< template id ='demoTemplate'> <跨度> < div class =btn-group> < button type =buttonclass =js-zoom-in>放大< / button> < button type =buttonclass =js-zoom-out>缩小< / button> < / DIV> < img id =imagesrc =style =display：none> < / span>< / template>
解决方案
你有一些范围问题和其他一些问题。我去的时候试着评论。我还解决了丢失和额外分号的问题。
我创建了一个全局对象 myApp。来保存东西而不是大量的全局变量。
可用性：+要求上传的东西，但不清楚（对我来说）什么是正确的，用户也可能会注意到 - 但这是意见而不是事实。我没有看到那些编辑或类似的东西所以你的缩放可能包含在丢失的代码中？我不知道那里。
现在问题：缩放图像 - 你的上传正在流行，你在画布上有重复的id。我不太了解你为了做得更好而想做什么。
var myApp = myApp || {}; myApp.target = {}; myApp.imageUrl =https://i.imgur.com/RzEm1WK.png\";myApp.jsonData = {layers：[{x：0，height ：612，layers：[{x：160，layers：[{x：0，src：ax0HVTs.png，y：0，height：296， width：429，name：L2b-1}]，y：291，name：user_image_1}，{x：25，layers：[{x：0 ，src：hEM2kEP.png，height：324，width：471，y：0，name：L2C-1}]，y：22，name ：L2}]，y：0，width：612，name：L1}]}; //下面的代码将从json filefunction getAllSrc（layers）获取掩码图像{let arr = [ ]。 layers.forEach（layer => {if（layer.src）{arr.push（{src：layer.src，x：layer.x，y：layer.y，height：layer.height，width：layer.width ，name：layer.name}）;} else if（layer.layers）{let newArr = getAllSrc（layer.layers）; if（newArr.length> 0）{newArr.forEach（（{src，x，y， height，width，name}）=> {arr.push（{src，x：（layer.x + x），y：（layer.y + y），height，width，name：（name）}）; }）;}}}）; return arr;} function json（data）{var width = 0; var height = 0; let arr = getAllSrc（data.layers）;让layer1 = data.layers; width = layer1 [0] .width; height = layer1 [0]。高; let counter = 0; let table = []; for（let {src，x，y，name} of arr）{let csize = {'width'：width +px，'height'：height +px}; $（。container）。css（csize）.addClass（'temp'）; //获取蒙版图像的高度和宽度 var ImagePosition = arr; // code end var mask = $（。container）。mask（{imageUrl：myApp.imageUrl，//在哪里定义src？maskImageUrl：'https：//i.imgur.com/'+ src，onMaskImageCreate： function（img）{//掩码图像位置img.css（{position：绝对，左：x +px，top：y +px}）; //代码结束} ，id：counter}）; table.push（掩模）; fileup.onchange = function（）{let mask2 = table [myApp.target]; const newImageLoadedId = mask2.loadImage（URL.createObjectURL（fileup.files [0]））; document.getElementById（'fileup'）。value =; //编辑图像让mskimg = $（。masked-img+ newImageLoadedId）; if（mskimg.length === 1）{let mySpan = $（< span class ='pip'>< / span>）; mySpan.addClass（pip+ newImageLoadedId）;让darkId =dark+ newImageLoadedId; let myA = $（< a onclick ='document.getElementById（'+ darkId +'）。style.display = \block \;'>< / a>）; let linkSpan = $（< span class ='edit'> Edit< / span>）。addClass（edit+ newImageLoadedId）; myA.append（linkSpan）; mySpan.append（myA）.insertAfter（mskimg）.css（{left：ImagePosition [newImageLoadedId] .x +（ImagePosition [newImageLoadedId] .width / 2）+px，top：ImagePosition [newImageLoadedId]。 y +（ImagePosition [newImageLoadedId] .height / 2）+px}）; $（< div id ='+ darkId +'class ='dark_content'>< / div>）。append（$（'＃demoTemplate'）。html（）+< a href = 'javascript：void（0）'onclick = \document.getElementById（'+ darkId +'）。style.display ='none'\> Close< / a>）。appendTo（。 pip+ newImageLoadedId.css（{left：$（'。edit'+ newImageLoadedId）.width（）+ 2 +px，top：0px}）; } //在这里编辑代码....};计数器++; $（function（）{//下面的代码将上传图像onclick mask image $（'。container'）。click（function（e）{var res = e.target; myApp.target = res.id; console。 log（target：，myApp.target）; if（e.target.getContext）{//仅在非透明部分内部单击var pixel = e.target.getContext（'2d'）。getImageData（e.offsetX，e .offsetY，1,1）.data; if（pixel [3] === 255）{setTimeout（（）=> {$（'＃fileup'）。click（）;}，20）;}}} ）; json（myApp.jsonData）;}）; //文档结束// jq插件（函数（$）{var JQmasks = []; $ .fn.mask = function（options）{//这是获取默认选项的最简单方法.var settings = $。 extend（{//这些是默认值.maskImageUrl：undefined，imageUrl：undefined，scale：1，id：new Date（）。getUTCMilliseconds（）。toString（），x：0，// image start position y：0， // image start position onMaskImageCreate：function（div）{}，}，options）; var container = $（this）; let prevX = 0，prevY = 0，draggable = false，img，canvas，context，image，timeout， initImage = false，startX = settings.x，startY = settings.y，div; container.mousePosition = function（event）{return {x：event.pageX || event.offsetX，y：event.pageY || event.offsetY };}; container.selected = function（ev）{var pos = container.mousePosition（ev）; var item = $（。masked-img canvas）。filter（function（function） ）{var offset = $（this）.offset（）; var x = pos.x - offset.left; var y = pos.y - offset.top; var d = this.getContext（'2d'）。getImageData（x，y，1,1）.data;返回d [0]> 0; }）; JQmasks.forEach（function（el）{var id = item.length> 0？$（item）.attr（id）：; if（el.id == id）el.item.enable（） ;否则el.item.disable（）;}）; }; container.enable = function（）{draggable = true; $（canvas）.attr（active，true）; div.css（{z-index：2}）; }; container.disable = function（）{draggable = false; $（canvas）.attr（active，false）; div.css（{z-index：1}）; }; container.getImagePosition = function（）{return {x：settings.x，y：settings.y，scale：settings.scale}; }; container.updateStyle = function（）{return new Promise（（resolve，reject）=> {context.beginPath（）; context.globalCompositeOperation =source-over; image = new Image（）; image.setAttribute（'crossOrigin '，'anonymous'）; image.src = settings.maskImageUrl; image.onload = function（）{canvas.width = image.width; canvas.height = image.height; context.drawImage（image，0,0，image .width，image.height）; div.css（{width：image.width，height：image.height}）; resolve（）;};}）; }; function renderInnerImage（）{img = new Image（）; img.setAttribute（'crossOrigin'，'anonymous'）; img.src = settings.imageUrl; img.onload = function（）{settings.x = settings.x == 0&& initImage？ （canvas.width - （img.width * settings.scale））/ 2：settings.x; settings.y = settings.y == 0&& initImage？ （canvas.height - （img.height * settings.scale））/ 2：settings.y; context.globalCompositeOperation ='source-atop'; context.drawImage（img，settings.x，settings.y，img.width * settings.scale，img.height * settings.scale）; initImage = false; }; } //更改可拖动图像container.loadImage = function（imageUrl）{// console.log（load）; // if（img）// img.remove（）; //重置代码。 settings.y = startY; settings.x = startX; prevX = prevY = 0; settings.imageUrl = imageUrl; initImage = true; container.updateStyle（），然后（renderInnerImage）。 // sirpepole添加此返回settings.id; }; //更改蒙版的Image container.loadMaskImage = function（imageUrl，from）{canvas = document.createElement（canvas）; context = canvas.getContext（'2d'）; canvas.setAttribute（draggable，true）; //无效，具有相同的id，让cvl = $（'canvas'）。length;的console.log（ CVL：，CVL SID：，settings.id）; canvas.setAttribute（id，settings.id）; settings.maskImageUrl = imageUrl; div = $（< div />，{class：masked-img}）。append（canvas）; // div.find（canvas）。on（'touchstart mousedown'，function（event）div.find（canvas）。on（'dragstart'，function（event）{if（event.handled === false）return; event.handled = true; container.onDragStart（event）;}）; div.find（canvas）。on（'touchend mouseup'，function（event）{if（event.handled === false） ）return; event.handled = true; container.selected（event）;}）; div.find（canvas）。bind（dragover，container.onDragOver）; container.append（div）; if（settings。 onMaskImageCreate）{settings.onMaskImageCreate（div）;} container.loadImage（settings.imageUrl）;}; container.loadMaskImage（settings.maskImageUrl）; JQmasks.push（{item：container，id：settings.id}）; //编辑图像div.addClass（'masked-img'+ settings.id）; //代码结束返回容器;};}（jQuery））; //放大，缩小，旋转代码//假设更改数据到myApp。 jsonData //在模板中，所以，它没有找到它？错ID？可怕的id // document.getElementById（img）。src = json（data）; // document.getElementById（template-image）。src = json（myApp.jsonData）; //可能应该命名为thesemyApp.angle = 0; myApp.scale = 1; myApp。$ img = $（'。template-image'）。eq（0）; //从上面移动，使用修改后的id（class）myApp。$ img.prop（ src，json（myApp.jsonData））; myApp。$ img.on（'transform'，function（）{$（this）.css（'transform'，`rotate（$ {myApp.angle} deg）scale（ $ {myApp.scale}）`）;}）; $（'。js-rotate-right'）。on（'click'，function（）{myApp.angle + = 15; myApp。$ img.trigger（' transform'）;}）; $（'。js-rotate-left'）。on（'click'，function（）{myApp.angle - = 15; myApp。$ img.trigger（'transform'）;}） ; $（'。js-zoom-in'）。on（'click'，function（）{myApp.scale + = 0.25; if（myApp.scale == 2.25）{myApp.scale = 2;} myApp。$ img.trigger（'transform'）;}）; $（'。js-zoom-out'）。on（'click'，function（）{myApp.scale - = 0.25; if（myApp.scale == 0） {myApp.scale = 0.25;} myApp。$ img.trigger（ transform'）;}）;
.container {background：金; position：relative;}。container img {position：absolute;顶部：0;底部：250px;左：0;右：0;保证金：自动; z-index：999;}。masked-img {overflow：hidden; position：relative;}。pip {display：inline-block;保证金：0; position：absolute;}。edit {display：block;背景：＃444;边框：1px纯黑色;白颜色; text-align：center;游标：指针;位置：绝对; z-index：3;}。编辑：悬停{background：white;颜色：黑色;位置：绝对; z-index：3;}。dark_content {display：none;位置：相对;最高：25％;左：25％;宽度：350px;身高：350px;填充：16px;边框：16px纯橙色;背景颜色：白色; z-index：1002; overflow：auto;}。js-zoom-out，.js-zoom-in {border：solid lime 1px;}
< script src =https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js>< / script>< input id =fileupname =fileuptype =filestyle =display：none/>< div class =container>< / div>< template id = 'demoTemplate' > <跨度> < span class =btn-group> < button type =buttonclass =js-zoom-in>放大< / button> < button type =buttonclass =js-zoom-out>缩小< / button> < button type =buttonclass =js-rotate-right>向右旋转< / button> < button type =buttonclass =js-rotate-left>向左旋转< / button> < /跨度> < img class =template-imagesrc =style =display：none> < / span>< / template>
Here is basic code for Zoom in & out : https://codepen.io/kidsdial/pen/ROBpgM, Now i tried to integrate that code in my Project....
Background :
1.User click on Mask & upload their own image on the mask....
2.Once image uploaded, Edit Text is displaying on image....
3.Once user click on Edit Text, we are displaying pop up box....
4.Zoom in & Zoom out button displaying....
Issue :
When we click on that button, zoom is not happening for user uploaded image....
Codepen : https://codepen.io/kidsdial/pen/PgxegO
Fiddle : https://jsfiddle.net/wdbmt54s/
var target;
const imageUrl = "https://i.imgur.com/RzEm1WK.png";
let jsonData = {
"layers": [{
"x": 0,
"height": 612,
"layers": [{
"x": 160,
"src": "ax0HVTs.png",
"y": 291,
"height": 296,
"width": 429,
"name": "mask_1"
},
{
"x": 25,
"src": "hEM2kEP.png",
"height": 324,
"width": 471,
"y": 22,
"name": "mask_2"
}
],
"y": 0,
"width": 612
}]
};
const containerElement = $('#container');
const fileUp = $('#fileup');
$(function() {
// Upload image onclick mask image
containerElement.click(function(e) {
var res = e.target;
target = res.id;
console.log(target);
if (e.target.getContext) {
// click only inside Non Transparent part
var pixel = e.target.getContext('2d').getImageData(e.offsetX, e.offsetY, 1, 1).data;
if (pixel[3] === 255) {
setTimeout(() => {
$('#fileup').click();
}, 20);
}
}
});
// Fetch mask images from json file - IGNORE this code
function getAllSrc(layers) {
let arr = [];
layers.forEach(layer => {
if (layer.src) {
arr.push({
src: layer.src,
x: layer.x,
y: layer.y,
height: layer.height,
width: layer.width,
name: layer.name
});
} else if (layer.layers) {
let newArr = getAllSrc(layer.layers);
if (newArr.length > 0) {
newArr.forEach(({
src,
x,
y,
height,
width,
name
}) => {
arr.push({
src,
x: (layer.x + x),
y: (layer.y + y),
height,
width,
name: (name)
});
});
}
}
});
return arr;
}
function json(data)
{
var width = 0;
var height = 0;
let arr = getAllSrc(data.layers);
let layer1 = data.layers;
width = layer1[0].width;
height = layer1[0].height;
let counter = 0;
let table = [];
// container dimensions
containerElement.css('width', width + "px").css('height', height + "px").addClass('temp');
//end
for (let {
src,
x,
y,
name
} of arr) {
//Get Height and width of mask image [ edit button ]
var ImagePosition = arr;
//code end
var mask = $(".container").mask({
imageUrl: imageUrl,
// Fetch Mask images
maskImageUrl: 'https://i.imgur.com/' + src,
// end
onMaskImageCreate: function(img) {
// Mask image positions
img.css({
"position": "absolute",
"left": x + "px",
"top": y + "px"
});
// end
},
id: counter
});
table.push(mask);
fileup.onchange = function() {
let mask2 = table[target];
const newImageLoadedId = mask2.loadImage(URL.createObjectURL(fileup.files[0]));
document.getElementById('fileup').value = "";
// Edit image - IGNORE this code
if ($(".masked-img" + newImageLoadedId).length === 1) {
$("<span class=\"pip pip" + newImageLoadedId + "\">" +
"<a onclick='document.getElementById(\"dark" + newImageLoadedId + "\").style.display=\"block\";'><span class=\"edit edit" + newImageLoadedId + "\" >Edit </span></a>" +
"</span>").insertAfter(".masked-img" + newImageLoadedId).css({
"left": ImagePosition[newImageLoadedId].x + (ImagePosition[newImageLoadedId].width / 2) + "px",
"top": ImagePosition[newImageLoadedId].y + (ImagePosition[newImageLoadedId].height / 2) + "px"
});;
$("<div id=\'dark" + newImageLoadedId + "\' class=\'dark_content\'>" +
$('#demoTemplate').html() +
"<a href=\"javascript:void(0)\" onclick=\"document.getElementById(\'dark" + newImageLoadedId + "\').style.display=\'none\'\">Close</a>" + "</div>").appendTo(".pip" + newImageLoadedId).css({
"left": $('.edit' + newImageLoadedId).width() + 2 + "px",
"top": "0px"
});
}
// end
};
counter++;
}
}
json(jsonData);
}); // end of function
// Image code
(function($) {
var JQmasks = [];
$.fn.mask = function(options) {
// This is the easiest way to have default options.
var settings = $.extend({
// These are the defaults.
maskImageUrl: undefined,
imageUrl: undefined,
scale: 1,
id: new Date().getUTCMilliseconds().toString(),
x: 0, // image start position
y: 0, // image start position
onMaskImageCreate: function(div) {},
}, options);
var container = $(this);
let prevX = 0,
prevY = 0,
draggable = false,
img,
canvas,
context,
image,
timeout,
initImage = false,
startX = settings.x,
startY = settings.y,
div;
container.mousePosition = function(event) {
return {
x: event.pageX || event.offsetX,
y: event.pageY || event.offsetY
};
}
container.selected = function(ev) {
var pos = container.mousePosition(ev);
var item = $(".masked-img canvas").filter(function() {
var offset = $(this).offset()
var x = pos.x - offset.left;
var y = pos.y - offset.top;
var d = this.getContext('2d').getImageData(x, y, 1, 1).data;
return d[0] > 0
});
JQmasks.forEach(function(el) {
var id = item.length > 0 ? $(item).attr("id") : "";
if (el.id == id)
el.item.enable();
else el.item.disable();
});
};
container.enable = function() {
draggable = true;
$(canvas).attr("active", "true");
div.css({
"z-index": 2
});
}
container.disable = function() {
draggable = false;
$(canvas).attr("active", "false");
div.css({
"z-index": 1
});
}
container.getImagePosition = function() {
return {
x: settings.x,
y: settings.y,
scale: settings.scale
};
};
container.updateStyle = function() {
return new Promise((resolve, reject) => {
context.beginPath();
context.globalCompositeOperation = "source-over";
image = new Image();
image.setAttribute('crossOrigin', 'anonymous');
image.src = settings.maskImageUrl;
image.onload = function() {
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0, image.width, image.height);
div.css({
"width": image.width,
"height": image.height
});
resolve();
};
});
};
function renderInnerImage() {
img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = settings.imageUrl;
img.onload = function() {
settings.x = settings.x == 0 && initImage ? (canvas.width - (img.width * settings.scale)) / 2 : settings.x;
settings.y = settings.y == 0 && initImage ? (canvas.height - (img.height * settings.scale)) / 2 : settings.y;
context.globalCompositeOperation = 'source-atop';
context.drawImage(img, settings.x, settings.y, img.width * settings.scale, img.height * settings.scale);
initImage = false;
};
}
// change the draggable image
container.loadImage = function(imageUrl) {
console.log("load");
settings.y = startY;
settings.x = startX;
prevX = prevY = 0;
settings.imageUrl = imageUrl;
initImage = true;
container.updateStyle().then(renderInnerImage);
// sirpepole Add this
return settings.id;
};
container.loadMaskImage = function(imageUrl, from) {
canvas = document.createElement("canvas");
context = canvas.getContext('2d');
canvas.setAttribute("draggable", "true");
canvas.setAttribute("id", settings.id);
settings.maskImageUrl = imageUrl;
div = $("<div/>", {
"class": "masked-img"
}).append(canvas);
// div.find("canvas").on('touchstart mousedown', function(event)
div.find("canvas").on('dragstart', function(event) {
if (event.handled === false) return;
event.handled = true;
container.onDragStart(event);
});
div.find("canvas").on('touchend mouseup', function(event) {
if (event.handled === false) return;
event.handled = true;
container.selected(event);
});
div.find("canvas").bind("dragover", container.onDragOver);
container.append(div);
if (settings.onMaskImageCreate)
settings.onMaskImageCreate(div);
container.loadImage(settings.imageUrl);
};
container.loadMaskImage(settings.maskImageUrl);
JQmasks.push({
item: container,
id: settings.id
})
// Edit image
div.addClass('masked-img' + settings.id);
// end
return container;
};
}(jQuery));
// Zoom
document.getElementById("img").src = json(data);
var angle = 0;
var scale = 1;
var $img = $('#image');
$img.on('transform', function() {
$img.css('transform', `rotate(${angle}deg) scale(${scale})`);
});
$('.js-zoom-in').on('click', function() {
scale += 0.25;
if (scale == 2.25) {
scale = 2;
};
$img.trigger('transform');
});
$('.js-zoom-out').on('click', function() {
scale -= 0.25;
if (scale == 0) {
scale = 0.25;
}
$img.trigger('transform');
});
.container {
background: silver;
position: relative;
}
.container img {
position: absolute;
top: 0;
bottom: 250px;
left: 0;
right: 0;
margin: auto;
z-index: 999;
}
.masked-img {
overflow: hidden;
position: relative;
}
.pip {
display: inline-block;
margin: 0;
position: absolute;
}
.edit {
display: block;
background: #444;
border: 1px solid black;
color: white;
text-align: center;
cursor: pointer;
position: absolute;
z-index: 3;
}
.edit:hover {
background: white;
color: black;
position: absolute;
z-index: 3;
}
.dark_content {
display: none;
position: relative;
top: 25%;
left: 25%;
width: 250px;
height: 250px;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index: 1002;
overflow: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<input id="fileup" name="fileup" type="file" style="display:none" >
<div id="container"class="container">
</div>
<template id='demoTemplate'>
<span>
<div class="btn-group">
<button type="button" class="js-zoom-in">Zoom In</button>
<button type="button" class="js-zoom-out">Zoom Out</button>
</div>
<img id="image" src ="" style ="display:none">
</span>
</template>
解决方案
You have some scope issues, and some other stuff. I tried to comment as I went. I also fixed issues with missing and extra semi-colons.
I created a global object myApp. to hold the stuff instead of a large number of global variables.
Usability: the "+" asks for something to upload but it is not clear (to me) what right off, users may note that also - but that is opinion not fact. I do not see those "edit" or anything like that so your zoom perhaps is wrapped in that lost code? I have no idea there.
Now the QUESTION: zoom on the image - your "upload" is bleeding through, you have duplicate id on the canvas. I do not know enough about what you are attempting to do to get this better.
var myApp = myApp || {};
myApp.target = {};
myApp.imageUrl = "https://i.imgur.com/RzEm1WK.png";
myApp.jsonData = {
"layers": [{
"x": 0,
"height": 612,
"layers": [{
"x": 160,
"layers": [{
"x": 0,
"src": "ax0HVTs.png",
"y": 0,
"height": 296,
"width": 429,
"name": "L2b-1"
}],
"y": 291,
"name": "user_image_1"
},
{
"x": 25,
"layers": [{
"x": 0,
"src": "hEM2kEP.png",
"height": 324,
"width": 471,
"y": 0,
"name": "L2C-1"
}],
"y": 22,
"name": "L2"
}
],
"y": 0,
"width": 612,
"name": "L1"
}]
};
// Below code will fetch mask images from json file
function getAllSrc(layers) {
let arr = [];
layers.forEach(layer => {
if (layer.src) {
arr.push({
src: layer.src,
x: layer.x,
y: layer.y,
height: layer.height,
width: layer.width,
name: layer.name
});
} else if (layer.layers) {
let newArr = getAllSrc(layer.layers);
if (newArr.length > 0) {
newArr.forEach(({
src,
x,
y,
height,
width,
name
}) => {
arr.push({
src,
x: (layer.x + x),
y: (layer.y + y),
height,
width,
name: (name)
});
});
}
}
});
return arr;
}
function json(data) {
var width = 0;
var height = 0;
let arr = getAllSrc(data.layers);
let layer1 = data.layers;
width = layer1[0].width;
height = layer1[0].height;
let counter = 0;
let table = [];
for (let {
src,
x,
y,
name
} of arr) {
let csize = {
'width': width + "px",
'height': height + "px"
};
$(".container")
.css(csize)
.addClass('temp');
//Get Height and width of mask image [ edit button ]
var ImagePosition = arr;
//code end
var mask = $(".container").mask({
imageUrl: myApp.imageUrl,
// where is src defined?
maskImageUrl: 'https://i.imgur.com/' + src,
onMaskImageCreate: function(img) {
// Mask image positions
img.css({
"position": "absolute",
"left": x + "px",
"top": y + "px"
});
// code end
},
id: counter
});
table.push(mask);
fileup.onchange = function() {
let mask2 = table[myApp.target];
const newImageLoadedId = mask2.loadImage(URL.createObjectURL(fileup.files[0]));
document.getElementById('fileup').value = "";
// Edit image
let mskimg = $(".masked-img" + newImageLoadedId);
if (mskimg.length === 1) {
let mySpan = $("<span class='pip'></span>");
mySpan.addClass("pip" + newImageLoadedId);
let darkId = "dark" + newImageLoadedId;
let myA = $("<a onclick='document.getElementById('" + darkId + "').style.display=\"block\";'></a>");
let linkSpan = $("<span class='edit'>Edit</span>")
.addClass("edit" + newImageLoadedId);
myA.append(linkSpan);
mySpan.append(myA)
.insertAfter(mskimg)
.css({
"left": ImagePosition[newImageLoadedId].x + (ImagePosition[newImageLoadedId].width / 2) + "px",
"top": ImagePosition[newImageLoadedId].y + (ImagePosition[newImageLoadedId].height / 2) + "px"
});
$("<div id='" + darkId + "' class='dark_content'></div>").append($('#demoTemplate').html() +
"<a href='javascript:void(0)' onclick=\"document.getElementById('" + darkId + "').style.display='none'\">Close</a>")
.appendTo(".pip" + newImageLoadedId)
.css({
"left": $('.edit' + newImageLoadedId).width() + 2 + "px",
"top": "0px"
});
}
// Edit code end here....
};
counter++;
}
}
$(function() {
// below code will upload image onclick mask image
$('.container').click(function(e) {
var res = e.target;
myApp.target = res.id;
console.log("target:", myApp.target);
if (e.target.getContext) {
// click only inside Non Transparent part
var pixel = e.target.getContext('2d').getImageData(e.offsetX, e.offsetY, 1, 1).data;
if (pixel[3] === 255) {
setTimeout(() => {
$('#fileup').click();
}, 20);
}
}
});
json(myApp.jsonData);
}); // end of document ready
// jq plugin
(function($) {
var JQmasks = [];
$.fn.mask = function(options) {
// This is the easiest way to have default options.
var settings = $.extend({
// These are the defaults.
maskImageUrl: undefined,
imageUrl: undefined,
scale: 1,
id: new Date().getUTCMilliseconds().toString(),
x: 0, // image start position
y: 0, // image start position
onMaskImageCreate: function(div) {},
}, options);
var container = $(this);
let prevX = 0,
prevY = 0,
draggable = false,
img,
canvas,
context,
image,
timeout,
initImage = false,
startX = settings.x,
startY = settings.y,
div;
container.mousePosition = function(event) {
return {
x: event.pageX || event.offsetX,
y: event.pageY || event.offsetY
};
};
container.selected = function(ev) {
var pos = container.mousePosition(ev);
var item = $(".masked-img canvas").filter(function() {
var offset = $(this).offset();
var x = pos.x - offset.left;
var y = pos.y - offset.top;
var d = this.getContext('2d').getImageData(x, y, 1, 1).data;
return d[0] > 0;
});
JQmasks.forEach(function(el) {
var id = item.length > 0 ? $(item).attr("id") : "";
if (el.id == id)
el.item.enable();
else el.item.disable();
});
};
container.enable = function() {
draggable = true;
$(canvas).attr("active", "true");
div.css({
"z-index": 2
});
};
container.disable = function() {
draggable = false;
$(canvas).attr("active", "false");
div.css({
"z-index": 1
});
};
container.getImagePosition = function() {
return {
x: settings.x,
y: settings.y,
scale: settings.scale
};
};
container.updateStyle = function() {
return new Promise((resolve, reject) => {
context.beginPath();
context.globalCompositeOperation = "source-over";
image = new Image();
image.setAttribute('crossOrigin', 'anonymous');
image.src = settings.maskImageUrl;
image.onload = function() {
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0, image.width, image.height);
div.css({
"width": image.width,
"height": image.height
});
resolve();
};
});
};
function renderInnerImage() {
img = new Image();
img.setAttribute('crossOrigin', 'anonymous');
img.src = settings.imageUrl;
img.onload = function() {
settings.x = settings.x == 0 && initImage ? (canvas.width - (img.width * settings.scale)) / 2 : settings.x;
settings.y = settings.y == 0 && initImage ? (canvas.height - (img.height * settings.scale)) / 2 : settings.y;
context.globalCompositeOperation = 'source-atop';
context.drawImage(img, settings.x, settings.y, img.width * settings.scale, img.height * settings.scale);
initImage = false;
};
}
// change the draggable image
container.loadImage = function(imageUrl) {
// console.log("load");
//if (img)
// img.remove();
// reset the code.
settings.y = startY;
settings.x = startX;
prevX = prevY = 0;
settings.imageUrl = imageUrl;
initImage = true;
container.updateStyle().then(renderInnerImage);
// sirpepole Add this
return settings.id;
};
// change the masked Image
container.loadMaskImage = function(imageUrl, from) {
canvas = document.createElement("canvas");
context = canvas.getContext('2d');
canvas.setAttribute("draggable", "true");
// invalid to have same id
let cvl = $('canvas').length;
console.log("cvl:",cvl,"sid:",settings.id);
canvas.setAttribute("id", settings.id);
settings.maskImageUrl = imageUrl;
div = $("<div/>", {
"class": "masked-img"
}).append(canvas);
// div.find("canvas").on('touchstart mousedown', function(event)
div.find("canvas").on('dragstart', function(event) {
if (event.handled === false) return;
event.handled = true;
container.onDragStart(event);
});
div.find("canvas").on('touchend mouseup', function(event) {
if (event.handled === false) return;
event.handled = true;
container.selected(event);
});
div.find("canvas").bind("dragover", container.onDragOver);
container.append(div);
if (settings.onMaskImageCreate){
settings.onMaskImageCreate(div);}
container.loadImage(settings.imageUrl);
};
container.loadMaskImage(settings.maskImageUrl);
JQmasks.push({
item: container,
id: settings.id
});
// Edit image
div.addClass('masked-img' + settings.id);
// code end
return container;
};
}(jQuery));
//Zoom in , Zoom out , Rotate code
// assume change data to myApp.jsonData
// in the template so, it does not find it? wrong ID? terrible id
//document.getElementById("img").src = json(data);
//document.getElementById("template-image").src = json(myApp.jsonData);
// probably should namespace these
myApp.angle = 0;
myApp.scale = 1;
myApp.$img = $('.template-image').eq(0);
// moved from above, use the revised id (class)
myApp.$img.prop("src", json(myApp.jsonData));
myApp.$img.on('transform', function() {
$(this).css('transform', `rotate(${myApp.angle}deg) scale(${myApp.scale})`);
});
$('.js-rotate-right').on('click', function() {
myApp.angle += 15;
myApp.$img.trigger('transform');
});
$('.js-rotate-left').on('click', function() {
myApp.angle -= 15;
myApp.$img.trigger('transform');
});
$('.js-zoom-in').on('click', function() {
myApp.scale += 0.25;
if (myApp.scale == 2.25) {
myApp.scale = 2;
}
myApp.$img.trigger('transform');
});
$('.js-zoom-out').on('click', function() {
myApp.scale -= 0.25;
if (myApp.scale == 0) {
myApp.scale = 0.25;
}
myApp.$img.trigger('transform');
});
.container {
background: gold;
position: relative;
}
.container img {
position: absolute;
top: 0;
bottom: 250px;
left: 0;
right: 0;
margin: auto;
z-index: 999;
}
.masked-img {
overflow: hidden;
position: relative;
}
.pip {
display: inline-block;
margin: 0;
position: absolute;
}
.edit {
display: block;
background: #444;
border: 1px solid black;
color: white;
text-align: center;
cursor: pointer;
position: absolute;
z-index: 3;
}
.edit:hover {
background: white;
color: black;
position: absolute;
z-index: 3;
}
.dark_content {
display: none;
position: relative;
top: 25%;
left: 25%;
width: 350px;
height: 350px;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index: 1002;
overflow: auto;
}
.js-zoom-out,.js-zoom-in{border: solid lime 1px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="fileup" name="fileup" type="file" style="display:none" />
<div class="container">
</div>
<template id='demoTemplate'>
<span>
<span class="btn-group">
<button type="button" class="js-zoom-in">Zoom In</button>
<button type="button" class="js-zoom-out">Zoom Out</button>
<button type="button" class="js-rotate-right">Rotate Right</button>
<button type="button" class="js-rotate-left">Rotate Left</button>
</span>
<img class="template-image" src ="" style ="display:none"> </span>
</template>
这篇关于缩放用户上传的图像onclick按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
