gpt4 book ai didi

html5-canvas - KonjaJs 使用 toDataUrl 保存背景图像

转载 作者:行者123 更新时间:2023-12-04 10:32:25 26 4
gpt4 key购买 nike

我正在使用 konvajs ( https://konvajs.org ) 创建一个网页,用户可以在其中将下拉家具图像拖到带有背景图像的 Canvas 中。然后用户可以单击提交按钮,我调用 stage.toDataUrl() ,将其存储在 textarea 中并保存到数据库。一切正常,除了当我加载 base 64 字符串时,我的背景图像丢失了,但所有其他拖放图像都在那里。下面是我的详细代码。请帮忙..

          var stage = new Konva.Stage({
container: 'container',
width: 800,
height: 600
});


var canvasBg = new Image();
canvasBg.src = 'mybackgroundimage.png'; // --->> this is the image that fails to be saved as image
canvasBg.onload = function() {
initStage(canvasBg);
}

function initStage(canvasBg){
var background = new Konva.Layer();
background.id('background');
var layer = new Konva.Layer();
layer.id('items');
stage.add(background);
stage.add(layer);
drawBackground(background, canvasBg);

var item = '';

$('#product_container').on('dragstart', (e) => {
item = {};
item.src = e.target.dataset.imgsrc;
item.alt = e.target.dataset.imgalt;
item.id = e.target.dataset.imgid;
item.qty = 1;
item.price = e.target.dataset.price;
});

var con = stage.container();
con.addEventListener('dragover', function(e) {
e.preventDefault(); // !important
});

con.addEventListener('drop', function(e) {
e.preventDefault();
stage.setPointersPositions(e);
var group = new Konva.Group({
draggable: true
});
Konva.Image.fromURL(item.src, function(image) {
image.addName(item.alt);
image.setAttr('src', item.src);
image.id(item.id);

var stagePos = stage.getPointerPosition();
var imgPos = {
x : stagePos.x - image.width()/2,
y : stagePos.y - image.height()/2,
};
image.position(imgPos);

var text = new Konva.Text({
x: imgPos.x,
y: imgPos.y + image.height() + 4,
width: image.width(),
height: 20,
align: 'center',
verticalAlign: 'middle',
fontFamily: 'Calibri',
fontSize: 14,
text: item.alt,
fill: 'black'
});

group.add(image);
group.add(text);
layer.add(group);
layer.draw();
});
});
}


function drawBackground(background, bgImage) {
var context = background.getContext();
context.drawImage(bgImage, 0, 0, bgImage.width, bgImage.height, 0, 0, cWidth, cHeight);
}

// When user submit the form, i store stage.toDataURL() in textarea
$("#frmCanvas").submit(function(){
$("#stageimage").val(stage.toDataURL());
return true;
});

这是屏幕截图

保存前
/image/kywbH.png

保存后
/image/yCpn5.png

最佳答案

不建议使用 contextlayer直接地。
stage.toDataURL()不保存此类更改。要修复它,您有两种方法:

  • 使用自定义形状绘制背景:

  • var background = new Konva.Layer();
    var back = new Konva.Shape({
    sceneFunc: ctx => {
    ctx.drawImage(bgImage, 0, 0, bgImage.width, bgImage.height, 0, 0, cWidth, cHeight);
    }
    });
    background.add(back);
  • 或者只需添加 Konva.Image :

  • var background = new Konva.Layer();
    var back = new Konva.Image({
    image: bgImage
    });
    background.add(back);

    如果您有特殊的逻辑来剪辑/裁剪图像,您可以使用外部 Canvas :

    function createBackgroundCanvas(image) {
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    ctx.drawImage(image, 0, 0, image.width, image.height, 0, 0, cWidth, cHeight);
    }

    var background = new Konva.Layer();
    var back = new Konva.Image({
    image: createBackgroundCanvas(bgImage)
    });
    background.add(back);

    关于html5-canvas - KonjaJs 使用 toDataUrl 保存背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60359104/

    26 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com