Javascript 将png覆盖和图像合并到单个文件中

我用推荐的作物使它工作。下面是我如何得到它的插件。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图像。我试图采取正方形的图像，并添加一个覆盖，将使图像出现圆形，添加白色的角落或减去覆盖，并有透明的角落

插件使用画布的一部分创建图像。一旦图像被捕获，我将添加覆盖

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

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'});
            },

（函数（$）{
var cropbox=函数（选项，el）{
var el=el | |$（options.imageBox），
obj=
{
国家：{}，
比率：1，
选项：选项，
图像框：el，
thumbBox:el.find（options.thumbBox），
微调器：el.find（options.spinner），
图像：新图像（），
getDataURL:函数（）
{
var width=this.thumbBox.width（），
高度=this.thumbBox.height（），
canvas=document.createElement（“canvas”），
dim=el.css（“背景位置”）。拆分（“”），
大小=el.css（“背景大小”）。拆分（“”），
dx=parseInt（dim[0]）-el.width（）/2+width/2，
dy=parseInt（尺寸[1]）-el.height（）/2+height/2，
dw=parseInt（大小[0]），
dh=parseInt（大小[1]），
sh=parseInt（this.image.height），
sw=parseInt（this.image.width）；
画布宽度=宽度；
canvas.height=高度；
var context=canvas.getContext（“2d”）；
context.drawImage（this.image，0，0，sw，sh，dx，dy，dw，dh）；
var imageData=canvas.toDataURL（'image/png'）；
返回图像数据；
},
getBlob:function（）
{
var imageData=this.getDataURL（）；
var b64=imageData.replace（'data:image/png；base64'，''）；
var二进制=atob（b64）；
var数组=[]；
对于（var i=0；i

从您的示例中很难判断，但您可能只需要一个圆形的“裁剪”，而不是一个覆盖。如果是这样，请参阅“非常感谢”！使用裁剪就可以了，这是一条更好的路线。