上传图片任意使用canvas画自己想画的图形并填充

最新推荐文章于 2023-12-14 16:15:48 发布

我的大树

最新推荐文章于 2023-12-14 16:15:48 发布

阅读量1.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： jQuery canvas 文章标签： canvas任意图形填充

本文链接：https://blog.youkuaiyun.com/qq_43033730/article/details/102498648

jQuery 同时被 2 个专栏收录

5 篇文章

订阅专栏

canvas

1 篇文章

订阅专栏

本文介绍了一款基于HTML和JavaScript的手绘图片裁剪工具，用户可通过上传图片并使用鼠标绘制区域来裁剪图片，支持多边形选择，裁剪后的区域可填充半透明颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

没有找到合适的框架，自己写的，代码比较糙，这是效果图

在这里插入图片描述

直接复制就可以啦~

<input type="file" class="sc_an" id="file_upload"/>

<div class="sc_tu_view" id="jm" style="position: relative">
    <img src="" id="sc_tu_xs"/>
</div>

<div class="canv" id="jmn">

</div>

$("#file_upload").change(function () {
        var _URL = window.URL || window.webkitURL;
        var aa, img, dataURL;
        
        var fileObj = $(this)[0];
        var file = $(this)["0"].files;
        var $file = $(this);
        for (let i = 0; i < file.length; i++) {
            if (fileObj && fileObj.files && fileObj.files[0]) {
                dataURL = _URL.createObjectURL(fileObj.files[0]);
                
            } else {
                dataURL = $file.val();
                var imgObj = document.getElementById("sc_tu_xs");
                imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
            }
        }
        if ((aa = this.files[0])) {
            img = new Image();
            img.onload = function () {
                var wid = this.width;
                var hei = this.height;
                if ($("#jm").find("canvas").length >= 1) {
                    $("#jm").find("canvas").remove();
                }
                canvas = document.createElement('canvas');
                canvas.id = "hc";
                canvas.width = wid;
                canvas.height = hei;
                canvas.style.position = "absolute";
                canvas.style.left = "0";
                canvas.style.top = "0";
                document.getElementById("jm").appendChild(canvas);

                oCanvas = document.getElementById("hc");
                var imgObj = new Image();
                imgObj.src = dataURL;
                //待图片加载完后，将其显示在canvas上
                imgObj.onload = function(){
                    var ctx = oCanvas.getContext('2d');
                    ctx.drawImage(this, 0, 0);//this即是imgObj,保持图片的原始大小
                    var idx=0;
                    var aX,bX,cX,aa;
                    var aY,bY,cY,bb;
                    var tempxmin = 0;
                    var tempxmax = 0;
                    var tempymin = 0;
                    var tempymax = 0;
                    var XY = [];
                    oCanvas.onmousedown=function (ev) {
                        idx++;
                        var xy = [];
                        //鼠标按下的位置
                        var oldX = ev.offsetX;
                        var oldY = ev.offsetY;
                        if(idx==1 ) {
                            tempxmax = oldX;
                            tempxmin = oldX;
                            tempymax = oldY;
                            tempymin = oldY;
                        }
                        if (oldX<tempxmin){
                            tempxmin = oldX;
                        }
                        if (oldX>tempxmax){
                            tempxmax = oldX;
                        }
                        if (oldY<tempymin){
                            tempymin = oldY;
                        }
                        if (oldY>tempymax){
                            tempymax = oldY;
                        }
                        xy[0]=oldX;
                        xy[1]=oldY;
                        XY[idx-1]=xy;
                        // alert(XY);
                        if(Math.abs(cX-oldX)<=20&&Math.abs(cY-oldY)<=20){
                            oldX=cX;
                            oldY=cY;
                        }
                        ctx.beginPath();
                        ctx.stroke();
                        if(idx%2!=0){
                            aX = oldX;
                            aY = oldY;
                            if(idx==1){
                                cX = oldX;
                                cY = oldY;
                            }
                        }else{
                            bX = oldX;
                            bY = oldY;
                        }
                        if(idx!=1){
                            ctx.moveTo(bX,bY);
                            ctx.lineTo(aX,aY);
                            ctx.strokeStyle = "red";//线条的颜色
                            ctx.stroke();
                            if(idx>=4){
                                if(Math.abs(cX-oldX)<=20&&Math.abs(cY-oldY)<=20){
                                    ansd();
                                    oldX =0; oldY = 0;
                                    bX = 0; bY = 0;
                                    XY = [];
                                    idx = 0;
                                }
                            }
                        }
                    };

                    function ansd() {
                        ctx.beginPath();
                        for(var u=0;u<XY.length-1;u++){
                            ctx.lineTo(XY[u][0],XY[u][1]);
                        }
                        ctx.closePath();
                        ctx.fillStyle="rgb(192, 80, 77,.5)";
                        ctx.fill();
                    }
                }
            };
            img.src = _URL.createObjectURL(aa);
        }
    });