Question

我按照建议使用裁剪。这是我如何使用插件获得它。 if语句只是因为我有多个裁剪尺寸，圆形裁剪仅适用于方形图像。

                canvas.width = width;
                canvas.height = height;
                var context = canvas.getContext("2d");
                context.drawImage(this.image, 0, 0, sw, sh, dx, dy, dw, dh);

                if (width==height){
                    context.globalCompositeOperation='destination-in';
                    context.beginPath();
                    context.arc(width/2,height/2,height/2,0,Math.PI*2);
                    context.closePath();
                    context.fill();
                }

                var imageData = canvas.toDataURL('image/png');
                return imageData;

            },

- 原始问题 -

我正在使用一个名为CropBox的jQuery插件，我已将其设置为导出300x300图像。我正在尝试拍摄正方形图像并添加一个叠加层，使图像显示为圆形，添加白色边角或减去叠加层并具有透明角。

What I'm going for.

插件使用画布的一部分来创建图像。捕获图像后，我正在寻找添加叠加层。

添加我的图像并尝试绘制图像。

var overlay = new Image();
overlay.src = 'MyOverlay.png';

context.drawImage(overlay, 0, 0);

然后我迷失了如何将其添加到imageData。它也应该从0,0开始，任何输入都会被欣赏。

插件的一部分：

(function ($) {
var cropbox = function(options, el){
    var el = el || $(options.imageBox),
        obj =
        {
            state : {},
            ratio : 1,
            options : options,
            imageBox : el,
            thumbBox : el.find(options.thumbBox),
            spinner : el.find(options.spinner),
            image : new Image(),
            getDataURL: function ()
            {
                var width = this.thumbBox.width(),
                    height = this.thumbBox.height(),
                    canvas = document.createElement("canvas"),
                    dim = el.css('background-position').split(' '),
                    size = el.css('background-size').split(' '),
                    dx = parseInt(dim[0]) - el.width()/2 + width/2,
                    dy = parseInt(dim[1]) - el.height()/2 + height/2,
                    dw = parseInt(size[0]),
                    dh = parseInt(size[1]),
                    sh = parseInt(this.image.height),
                    sw = parseInt(this.image.width);

                canvas.width = width;
                canvas.height = height;
                var context = canvas.getContext("2d");
                context.drawImage(this.image, 0, 0, sw, sh, dx, dy, dw, dh);
                var imageData = canvas.toDataURL('image/png');
                return imageData;
            },
            getBlob: function()
            {
                var imageData = this.getDataURL();
                var b64 = imageData.replace('data:image/png;base64,','');
                var binary = atob(b64);
                var array = [];
                for (var i = 0; i < binary.length; i++) {
                    array.push(binary.charCodeAt(i));
                }
                return  new Blob([new Uint8Array(array)], {type: 'image/png'});
            },

将png叠加层和图像合并为单个文件

0 个答案: