javascript Canvas Uploaded Image exclude non editable Layer using svg

我正在使用Svg Image进行产品定制。在页面加载中，我正在加载用于定制的产品。产品形象有两层。手机壳[可编辑]和上面的相机不可编辑。我能够拖动和调整画布中的图像使用下面的代码。但上传的图像显示在相机上方，当它出现在相机部分。相机层应高于上传的图像始终。

初始化变量

var canvas = document.getElementById('myCan');
            var cxt = canvas.getContext('2d');
            var bkg = new Image();
            var tempimage;
            bkg.onload = function() {
                canvas.width = bkg.width;
                canvas.height = bkg.height;
            }
            bkg.src = 'product-without-customization.svg';
            
            var mouse = {
                x: 0
                , y: 0
            };
            var obj = {
                x: 0
                , y: 0
                , w: 100
                , h: 100
            };
            var u = [];

字符串

活动

$('#fileLoader').on('change', addImage);

型

功能

function draw() {
                cxt.save();
                cxt.clearRect(0, 0, canvas.width, canvas.height);
                cxt.drawImage(bkg, 0, 0);
                for (i = 0; i < u.length; i++) {
                    u[i].update(i);
                }
                cxt.restore();
            }

            function addImage(e) {
                var t = new FileReader;
                t.onload = function (event) {
                    tempimage = new addNew(event.target.result);
                    u.push(tempimage);
                }
                t.readAsDataURL(e.target.files[0]);
            }

            function addNew(e) {
                var objnew = this
                    , drag = false
                    , rsize = false
                    , vsize = false;
                var vs = {
                    h: 0
                    , y: 0
                };
                var offimage = {
                    x: 0
                    , y: 0
                    , a: false
                }
                this.x = 50;
                this.y = 50;
                this.w = 100;
                this.h = 100;
                var img = new Image();
                img.src = e;
                this.update = function (arg) {
                    if (mousedown) {
                        if (!offimage.a) {
                            offimage.x = mouse.x - objnew.x;
                            offimage.y = mouse.y - objnew.y;
                            offimage.a = true;
                        }
                        var l = objnew.x
                            , r = objnew.x + objnew.w
                            , t = objnew.y
                            , b = objnew.y + objnew.h;
                        if (mouse.x < r && mouse.x > (r - 10) && mouse.y < b && mouse.y > t) {
                            if (!gotit) {
                                gotit = true;
                                rsize = true;
                                ontop = arg;
                            }
                        }
                        if (mouse.x < r && mouse.x > l && mouse.y < t && mouse.y > (t - 10)) {
                            if (!gotit) {
                                gotit = true;
                                vsize = true;
                                vs.h = objnew.h;
                                vs.y = mouse.y;
                                ontop = arg;
                            }
                        }
                        if (mouse.x < (r - 10) && mouse.x > l && mouse.y < b && mouse.y > t) {
                            if (!gotit) {
                                gotit = true;
                                drag = true;
                                ontop = arg;
                            }
                        }
                    }
                    else {
                        drag = false;
                        rsize = false;
                        vsize = false;
                        canvas.style.cursor = "default";
                        offimage.a = false;
                    }
                    if (drag) {
                        objnew.x = mouse.x - offimage.x;
                        objnew.y = mouse.y - offimage.y;
                        canvas.style.cursor = "move";
                        cxt.lineWidth = 1;
                        cxt.strokeRect(objnew.x, objnew.y, objnew.w, objnew.h);
                    }
                    if (rsize) {
                        canvas.style.cursor = "col-resize";
                        objnew.w = mouse.x - objnew.x;
                    }
                    if (vsize) {
                        canvas.style.cursor = "row-resize";
                        //console.log(objnew.h + ' C=' + mouse.y + ' O=' + vs.h + ' B=' +vs.y);
                        objnew.h = vs.h + (vs.y - mouse.y);
                        objnew.y = mouse.y;
                    }
                    cxt.drawImage(img, objnew.x, objnew.y, objnew.w, objnew.h);
                }
            }

型
下面是JSFiddle Link代码实现。
我怎样才能在相机下面上传图像？

获取结果（https://i.stack.imgur.com/dCFUz.png）
预期结果（https://i.stack.imgur.com/pD7S9.png）

我想你想要的是globalCompositeOperation prop ，它可以帮助我们指定在画布上绘制形状的顺序。
设置ctx.globalCompositeOperation = "destination-over"就可以了。

function draw() {
  ctx.save();
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // This is what you want
  ctx.globalCompositeOperation = "destination-over";
  ctx.drawImage(bkg, 0, 0);

  for (i = 0; i < u.length; i++) {
    u[i].update(i);
  }

  ctx.restore();
}

字符串
在globalCompositeOperation的文档中，您可以找到其他可以使用的值
这是您的JS Fiddle的更新版本。

请注意，我在fiddle中将变量名从cxt更改为ctx。如果您复制/粘贴代码，则必须将其更改回来，如果您在其他任何地方使用cxt。

这就是设置globalCompositeOperation值后的效果。
x1c 0d1x的数据
希望这对你有帮助！

javascript Canvas Uploaded Image exclude non editable Layer using svg

1条答案

相关问题

热门标签

最新问答