如何让Canvas中上传图片始终处于非可编辑摄像头图层下方

核心逻辑是调整Canvas的绘制顺序：把摄像头图层放在最后绘制，确保它始终处于所有上传图片的上方。具体修改步骤如下：

1. 拆分产品图层资源 #

将原有的产品图拆分为两个独立资源：

• 手机壳底座（无摄像头的底层资源）
• 摄像头图层（单独的上层资源）

2. 修改代码实现 #

初始化变量部分 #

新增摄像头图像的加载逻辑，替换原有的单一背景图：

var canvas = document.getElementById('myCan');
var cxt = canvas.getContext('2d');
// 手机壳底座（不带摄像头的底层）
var phoneBase = new Image();
// 摄像头图层（单独的上层）
var cameraLayer = new Image();
var tempimage;

phoneBase.onload = function() {
    canvas.width = phoneBase.width;
    canvas.height = phoneBase.height;
    // 摄像头图层加载完成后触发首次绘制
    cameraLayer.onload = draw;
}
phoneBase.src = 'product-base.svg'; // 替换为你的手机壳底座资源路径
cameraLayer.src = 'camera-layer.svg'; // 替换为你的摄像头图层资源路径

var mouse = { x: 0, y: 0 };
var obj = { x: 0, y: 0, w: 100, h: 100 };
var u = [];

调整draw函数的绘制顺序 #

修改绘制流程，确保摄像头图层最后绘制：

function draw() {
    cxt.save();
    cxt.clearRect(0, 0, canvas.width, canvas.height);
    // 1. 先画手机壳底座
    cxt.drawImage(phoneBase, 0, 0);
    // 2. 再绘制所有上传的定制图片
    for (i = 0; i < u.length; i++) {
        u[i].update(i);
        u[i].draw();
    }
    // 3. 最后画摄像头图层，锁定在最上层
    cxt.drawImage(cameraLayer, 0, 0);
    cxt.restore();
}

重构addNew函数的绘制逻辑 #

将图片绘制逻辑从update中拆分出来，统一交给draw函数处理，避免绘制顺序混乱：

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;
    
    // 新增draw方法，用于统一绘制图片
    this.draw = function() {
        cxt.drawImage(img, objnew.x, objnew.y, objnew.w, objnew.h);
        if (drag) {
            cxt.lineWidth = 1;
            cxt.strokeRect(objnew.x, objnew.y, objnew.w, objnew.h);
        }
    }
    
    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";
        }
        if (rsize) {
            canvas.style.cursor = "col-resize";
            objnew.w = mouse.x - objnew.x;
        }
        if (vsize) {
            canvas.style.cursor = "row-resize";
            objnew.h = vs.h + (vs.y - mouse.y);
            objnew.y = mouse.y;
        }
    }
}

原理说明 #

Canvas是按绘制顺序叠加图层的，先绘制的内容处于底层，后绘制的内容处于顶层。通过将摄像头图层放在所有定制图片之后绘制，就能确保它始终不会被上传的图片覆盖。

内容的提问来源于stack exchange，提问作者SushilkumarSetia