给头像带上口罩js插件小程序 | findtp插件网

findtp插件网

您现在的位置是:首页>图片内容页

Plugin

给头像带上口罩js插件小程序

简介:

时间:2020-03-15

访问:586

下载

详情

20200315224035-115377.png

可以在线为头像戴上口罩。将头像另外为图片,在程序中上传头像,切换不同的头像直到满意为止,可以拖动缩放口罩,或者按住顶部圆圈旋转口罩,调整口罩角度,最后合成戴口罩的头像,把图片保存下来即可,在手机上可以长按保存。


表单按钮调用js方法

function viewer() {
    var file = document.getElementById("upload").files[0];
    
    var reader = new FileReader;
    if (file) {
        reader.readAsDataURL(file);
        reader.onload = function(e) {
            img.src = reader.result;
            img.onload = function() {
                img2Cvs(img)
            }
        }
    } else {
        img.src = ""
    }
}

function img2Cvs(img) {
    cvs.width = img.width;
    cvs.height = img.height;
    cvs.style.display = "block";
    canvasFabric = new fabric.Canvas("cvs", {
        width: screenWidth,
        height: screenWidth,
        backgroundImage: new fabric.Image(img, {
            scaleX: screenWidth / img.width,
            scaleY: screenWidth / img.height
        })
    });
    changeHat();
    document.getElementById("uploadContainer").style.display = "none";
    document.getElementById("uploadText").style.display = "none";
    document.getElementById("upload").style.display = "none";
    document.getElementById("change").style.display = "block";
    document.getElementById("exportBtn").style.display = "block";
    document.getElementById("tip").style.opacity = 1
}

需要注意的是程序需要在web环境下才能生成图像。而且本程序来源于网上收集,有一个问题是在手机上执行,上传的头像是手机拍照的,头像会是横向的,无法自动调正。需要根据手机拍摄的图片,自己编写代码调整,本站已经修改优化了这个bug,在后续的插件中提供。


网盘下载:https://pan.baidu.com/s/17IU1AqACa0jxSHFXoAS21w 提取码: v7ie

网盘下载:https://72k.us/file/10434149-429477356


相关

相关评论

共有0条评论来说两句吧...