求助：画布内容保存到画布中（已实现一部分操作）后面不知道该怎么做

自渡96 2017-12-07 09:14:24
提供代码，想实现上面的画布中的内容保存到下面的画布中
代码介绍：先在浏览器中打开看效果，上面的canvas保存后会以图片的形式显示到下面的div中。我现在想把下面的div也改成canvas，把上面canvas中的内容以图片的形式保存到下面的canvas中，如果上面的canvas保存多次，则下面的canvas将插入多张图片，图片并排显示在一起，最后再将下面的canvas保存成一张图片（说白了就是和现在代码的效果差不多，只是把下面的div改canvas,div中的多张图片变成canvas中的内容，保存成一张）

下面的代码只有保存到div中的，后续代码没写，写了好多次，不是插入失败，就是有各种各样的问题，没办法完美实现
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=400">
<style type="text/css">
body {
margin: 0;
padding: 0;
text-align: center;
width:100%;
/*background-color: #936;*/
}
#canvasId {
background-color: #00000000;
}

.button {
width: 28%;
height: 60px;
font-size: 15px;
}
/*#imgDiv img{border:2px dashed #238E1B;}*/
</style>
</head>
<body>
<!--<h1>写字版</h1>-->
<canvas id="canvasId" width="400" height="500" style="border: 1px solid #7462CF"></canvas><br />
<input type="button" value="保存" class="button" onclick="hw.save();" />
<input type="button" value="清除写字板" class="button" onclick="hw.clear();" />
<input type="button" value="全部清除" class="button" onclick="hw.clearAll();" />
<input type="button" value="全部保存" class="button" onclick="hw.saveAll();" />
<div id="imgDiv"></div>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript">
function Handwriting(id) {
this.canvas = document.getElementById(id);
this.ctx = this.canvas.getContext("2d");
var on = ("ontouchstart" in document)? {
start: "touchstart", move: "touchmove", end: "touchend"
} : {
start: "mousedown", move: "mousemove", end: "mouseup"
};
this.canvas.addEventListener(on.start, this.downEvent.bind(this), false);
this.canvas.addEventListener(on.move, this.moveEvent.bind(this), false);
this.canvas.addEventListener(on.end, this.upEvent.bind(this), false);
this.canvas.addEventListener("contextmenu", function(e){ e.preventDefault() }, false);
this.moveFlag = false;
this.upof = {};
this.radius = 0;
this.has = [];
this.startOf = null;
this.lineMax = 30;
this.lineMin = 10;
this.linePressure = 1;
this.smoothness = 80;
this.history = [];
this.setColor("rgba(0,0,0,0.25)");
}

Handwriting.prototype.save = function () {
var imgData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height).data;
var lOffset = this.canvas.width, rOffset = 0,tOffset = this.canvas.height, bOffset = 0;
for (var i = 0; i < this.canvas.width; i++) {
for (var j = 0; j < this.canvas.height; j++) {
var pos = (i + this.canvas.width * j) * 4
if (imgData[pos] > 0 || imgData[pos + 1] > 0 || imgData[pos + 2] || imgData[pos + 3] > 0) {
bOffset = Math.max(j, bOffset); // 找到有色彩的最下端
rOffset = Math.max(i, rOffset); // 找到有色彩的最右端

tOffset = Math.min(j, tOffset); // 找到有色彩的最上端
lOffset = Math.min(i, lOffset); // 找到有色彩的最左端
}
}
}
lOffset++;
rOffset++;
tOffset++;
bOffset++;
var c = document.createElement("canvas");
c.width = rOffset-lOffset;
c.height = bOffset-tOffset;
var ctxs = c.getContext("2d");
ctxs.drawImage(this.canvas,lOffset, tOffset, c.width, c.height, 0, 0, c.width, c.height);
var url=c.toDataURL('image/png'),
imgDiv=document.getElementById('imgDiv');
img=new Image();
img.src=url;
img.width="50";
var bs=c.width/c.height;
img.height="50";

// img.width="100";
// var bs=c.width/c.height;
// img.height=Math.round(100/bs);
// imgDiv.innerHTML="";
imgDiv.appendChild(img);


this.history = [];
this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);
}

Handwriting.prototype.clear = function () {
this.history = [];
this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);
// document.getElementById('imgDiv').innerHTML="";
}

Handwriting.prototype.clearAll = function () {
this.history = [];
this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);
document.getElementById('imgDiv').innerHTML="";
}

Handwriting.prototype.saveAll = function () {
// var imglist=$("#imgDiv img");//获取ID为div里面的所有img
// alert(imglist.attr("src"));
// for(var i=0;i<imglist.length;i++){ //循环为每个img设置
// alert(imglist[0].attr("src"));
// alert(imglist[i].attr("src","图片地址"));
// //imglist[i].attr("src");
//
// }
$('#imgDiv img').each(function(){ //jquery.each()循环读取所有图片
alert($(this).attr('src'));
});
}

//Handwriting.prototype.historyBack = function () { //清除最后一笔
// this.history.pop();
// this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);
// for (var i = 0; i < this.history.length; i++) {
// var h = this.history[i];
// for (var j = 0; j < h.length; j+=3) {
// this.ctx.beginPath();
// this.ctx.arc(h[j],h[j+1],h[j+2],0,2*Math.PI,true);
// this.ctx.fill();
// }
// }
//}

Handwriting.prototype.downEvent = function (e) {
this.moveFlag = true;
this.has = [];
this.upof = this.getXY(e);
this.startOf = this.upof;
}

Handwriting.prototype.moveEvent = function (e) {
if (!this.moveFlag)
return;
e.preventDefault();
var of = this.getXY(e);
var up = this.upof;
var ur = this.radius;
this.has.unshift({time:new Date().getTime() ,dis:this.distance(up,of)});
var dis = 0;
var time = 0;
for (var n = 0; n < this.has.length-1; n++) {
dis += this.has[n].dis;
time += this.has[n].time-this.has[n+1].time;
if (dis>this.smoothness)
break;
}
var or = Math.min(time/dis*this.linePressure+this.lineMin , this.lineMax) / 2;
this.radius = or;
this.upof = of;
if (dis<7)
return;
if (this.startOf) {
up = this.startOf;
ur = or;
this.startOf = null;
this.history.push([]);
}
var len = Math.ceil(this.distance(up,of)/2);
for (var i = 0; i < len; i++) {
var x = up.x + (of.x-up.x)/len*i;
var y = up.y + (of.y-up.y)/len*i;
var r = ur + (or-ur)/len*i;
this.ctx.beginPath();
this.ctx.arc(x,y,r,0,2*Math.PI,true);
this.ctx.fill();
this.history[this.history.length-1].push(x,y,r);
}
}

Handwriting.prototype.upEvent = function (e) {
this.moveFlag = false;
}

Handwriting.prototype.getXY = function (e) {
var et = e.touches? e.touches[0] : e;
var x = et.clientX;
var y = et.clientY;
return {
x : x - this.canvas.offsetLeft + (document.body.scrollLeft || document.documentElement.scrollLeft),
y : y - this.canvas.offsetTop + (document.body.scrollTop || document.documentElement.scrollTop)
}
}

Handwriting.prototype.distance = function (a,b) {
var x = b.x-a.x , y = b.y-a.y;
return Math.sqrt(x*x+y*y);
}

Handwriting.prototype.setColor = function (c) {
this.ctx.fillStyle = c;
}

var hw = new Handwriting("canvasId");
hw.setColor("black");//设置画笔颜色
hw.lineMax = 30;//设置画笔最大线宽
hw.lineMin = 10;//设置画笔最小线宽
hw.linePressure = 1.2;//设置画笔笔触压力
hw.smoothness = 30;//设置画笔笔触大小变化的平滑度。
</script>
</body>
</html>
...全文
367 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
自渡96 2017-12-08
  • 打赏
  • 举报
 回复
[quote=引用 6 楼 apollokk 的回复:] 我的想法是上面的canvas先保存成图片，然后把图片插到下面的canvas中，我就是这么实现的，也碰到了锯齿问题，我查了drawImage（）方法，不应该会出现锯齿问题，不知道是不是我代码的问题
自渡96 2017-12-08
  • 打赏
  • 举报
 回复
引用 6 楼 apollokk 的回复:
位置的话，SavedImageCount=0就好了： 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=400">
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            text-align: center;
            width: 100%;
            /*background-color: #936;*/
        }

        #canvasId {
            background-color: #FFF;
        }

        .button {
            width: 100px;
            height: 40px;
            font-size: 15px;
        }
        /*#imgDiv img{border:2px dashed #238E1B;}*/
    </style>
</head>
<body>
    <!--<h1>写字版</h1>-->
    <canvas id="canvasId" width="400" height="500" style="border: 1px solid #7462CF"></canvas><br />
    <input type="button" value="保存" class="button" onclick="hw.save();" />
    <input type="button" value="清除写字板" class="button" onclick="hw.clear();" />
    <input type="button" value="全部清除" class="button" onclick="hw.clearAll();" />
    <input type="button" value="全部保存" class="button" onclick="hw.saveAll();" />
    <div></div>
    <canvas id="saveImgs" width="400" height="100" style="border:1px green solid"></canvas>
    <script src="../JS/jquery-1.11.1.js"></script>
    <script type="text/javascript">
        function Handwriting(id) {
            this.canvas = document.getElementById(id);
            this.ctx = this.canvas.getContext("2d");
            var on = ("ontouchstart" in document) ? {
                start: "touchstart", move: "touchmove", end: "touchend"
            } : {
                start: "mousedown", move: "mousemove", end: "mouseup"
            };
            this.canvas.addEventListener(on.start, this.downEvent.bind(this), false);
            this.canvas.addEventListener(on.move, this.moveEvent.bind(this), false);
            this.canvas.addEventListener(on.end, this.upEvent.bind(this), false);
            this.canvas.addEventListener("contextmenu", function (e) { e.preventDefault() }, false);
            this.moveFlag = false;
            this.upof = {};
            this.radius = 0;
            this.has = [];
            this.startOf = null;
            this.lineMax = 30;
            this.lineMin = 10;
            this.linePressure = 1;
            this.smoothness = 80;
            this.history = [];
            this.setColor("rgba(0,0,0,0.25)");
            this.SavedImageCount = 0;
            this.saveCanvas = document.getElementById('saveImgs');
        }

        Handwriting.prototype.save = function () {
            var imgData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height).data;
            var lOffset = this.canvas.width, rOffset = 0, tOffset = this.canvas.height, bOffset = 0;
            var hasData = false;
            for (var i = 0; i < this.canvas.width; i++) {
                for (var j = 0; j < this.canvas.height; j++) {
                    var pos = (i + this.canvas.width * j) * 4
                    if (imgData[pos] > 0 || imgData[pos + 1] > 0 || imgData[pos + 2] || imgData[pos + 3] > 0) {
                        bOffset = Math.max(j, bOffset); // 找到有色彩的最下端
                        rOffset = Math.max(i, rOffset); // 找到有色彩的最右端

                        tOffset = Math.min(j, tOffset); // 找到有色彩的最上端
                        lOffset = Math.min(i, lOffset); // 找到有色彩的最左端
                        hasData = true;
                    }
                }
            }
            lOffset++;
            rOffset++;
            tOffset++;
            bOffset++;
            var c = this.saveCanvas;
            var imgWidth = rOffset - lOffset, imgHeight = bOffset - tOffset;
            //转为100*100大小
            var scale = Math.max(imgWidth, imgHeight) / 100;
            //目标大小
            var oWidth = Math.floor(imgWidth / scale), oHeight = Math.floor(imgHeight / scale);
            //仅当大小大于10时才保存
            if (hasData && imgWidth > 10 && imgHeight > 10) {
                //目标位置
                var oX = Math.floor((this.SavedImageCount % 4) * 100);
                var oY = Math.floor(Math.floor(this.SavedImageCount / 4) * 100);
                var ctxs = c.getContext("2d");
                //根据需要增加高度
                if (oY + 100 > Number($(c).attr('height'))) {
                    var imageData = ctxs.getImageData(0, 0, c.width, c.height);// 保存当前图像
                    $(c).attr('height', Number($(c).attr('height')) + 100);
                    ctxs.putImageData(imageData, 0, 0); //重绘大小改变前保存的图像
                }
                //修正位置，绘制在中间
                var oX = Math.floor(oX + (100 - oWidth) / 2);
                var oY = Math.floor(oY + (100 - oHeight) / 2);

                ctxs.drawImage(this.canvas, lOffset, tOffset, imgWidth, imgHeight, oX, oY, oWidth, oHeight);
                this.SavedImageCount++;
            }
            this.history = [];
            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        }

        Handwriting.prototype.clear = function () {
            this.history = [];
            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        }

        Handwriting.prototype.clearAll = function () {
            this.history = [];
            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
            this.saveCanvas.height = 100;
            this.SavedImageCount = 0;
        }

        Handwriting.prototype.saveAll = function () {
        }

        //Handwriting.prototype.historyBack = function () {         //清除最后一笔
        //  this.history.pop();
        //  this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);
        //  for (var i = 0; i < this.history.length; i++) {
        //      var h = this.history[i];
        //      for (var j = 0; j < h.length; j+=3) {
        //          this.ctx.beginPath();
        //          this.ctx.arc(h[j],h[j+1],h[j+2],0,2*Math.PI,true);
        //          this.ctx.fill();
        //      }
        //  }
        //}

        Handwriting.prototype.downEvent = function (e) {
            this.moveFlag = true;
            this.has = [];
            this.upof = this.getXY(e);
            this.startOf = this.upof;
        }

        Handwriting.prototype.moveEvent = function (e) {
            if (!this.moveFlag)
                return;
            e.preventDefault();
            var of = this.getXY(e);
            var up = this.upof;
            var ur = this.radius;
            this.has.unshift({ time: new Date().getTime(), dis: this.distance(up, of) });
            var dis = 0;
            var time = 0;
            for (var n = 0; n < this.has.length - 1; n++) {
                dis += this.has[n].dis;
                time += this.has[n].time - this.has[n + 1].time;
                if (dis > this.smoothness)
                    break;
            }
            var or = Math.min(time / dis * this.linePressure + this.lineMin, this.lineMax) / 2;
            this.radius = or;
            this.upof = of;
            if (dis < 7)
                return;
            if (this.startOf) {
                up = this.startOf;
                ur = or;
                this.startOf = null;
                this.history.push([]);
            }
            var len = Math.ceil(this.distance(up, of) / 2);
            for (var i = 0; i < len; i++) {
                var x = up.x + (of.x - up.x) / len * i;
                var y = up.y + (of.y - up.y) / len * i;
                var r = ur + (or - ur) / len * i;
                this.ctx.beginPath();
                this.ctx.arc(x, y, r, 0, 2 * Math.PI, true);
                this.ctx.fill();
                this.history[this.history.length - 1].push(x, y, r);
            }
        }

        Handwriting.prototype.upEvent = function (e) {
            this.moveFlag = false;
        }

        Handwriting.prototype.getXY = function (e) {
            var et = e.touches ? e.touches[0] : e;
            var x = et.clientX;
            var y = et.clientY;
            return {
                x: x - this.canvas.offsetLeft + (document.body.scrollLeft || document.documentElement.scrollLeft),
                y: y - this.canvas.offsetTop + (document.body.scrollTop || document.documentElement.scrollTop)
            }
        }

        Handwriting.prototype.distance = function (a, b) {
            var x = b.x - a.x, y = b.y - a.y;
            return Math.sqrt(x * x + y * y);
        }

        Handwriting.prototype.setColor = function (c) {
            this.ctx.fillStyle = c;
        }

        var hw = new Handwriting("canvasId");
        hw.setColor("black");//设置画笔颜色
        hw.lineMax = 30;//设置画笔最大线宽
        hw.lineMin = 10;//设置画笔最小线宽
        hw.linePressure = 1.2;//设置画笔笔触压力
        hw.smoothness = 30;//设置画笔笔触大小变化的平滑度。
    </script>
</body>
</html>
我想下面的画布height=40px-60px之间，更改你的代码里的高度后，锯齿特别明显
自渡96 2017-12-08
  • 打赏
  • 举报
 回复
[quote=引用 6 楼 apollokk 的回复:] 下面canvas中的内容锯齿问题能解决吗，我自己也实现了插入到下面的canvas的功能，也是碰到锯齿问题 我的代码 Handwriting.prototype.save = function () { var imgData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height).data; var lOffset = this.canvas.width, rOffset = 0,tOffset = this.canvas.height, bOffset = 0; for (var i = 0; i < this.canvas.width; i++) { for (var j = 0; j < this.canvas.height; j++) { var pos = (i + this.canvas.width * j) * 4 if (imgData[pos] > 0 || imgData[pos + 1] > 0 || imgData[pos + 2] || imgData[pos + 3] > 0) { bOffset = Math.max(j, bOffset); // 找到有色彩的最下端 rOffset = Math.max(i, rOffset); // 找到有色彩的最右端 tOffset = Math.min(j, tOffset); // 找到有色彩的最上端 lOffset = Math.min(i, lOffset); // 找到有色彩的最左端 } } } lOffset++; rOffset++; tOffset++; bOffset++; var c = document.createElement("canvas"); c.width = rOffset-lOffset; c.height = bOffset-tOffset; var ctxs = c.getContext("2d"); ctxs.drawImage(this.canvas,lOffset, tOffset, c.width, c.height, 0, 0, c.width, c.height); var url=c.toDataURL('image/png'), imgDiv=document.getElementById('imgDiv'); img=new Image(); img.src=url; img.width="50"; var bs=c.width/c.height; img.height="50"; // img.width="100"; // var bs=c.width/c.height; // img.height=Math.round(100/bs); // imgDiv.innerHTML=""; imgDiv.appendChild(img); this.history = []; this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height); var c1=document.getElementById("myCanvas"); var ctx3 = c1.getContext("2d"); var imgx = 0; var imgy = 0; $('#imgDiv img').each(function(){ //jquery.each()循环读取所有图片 this.onload = function(){ ctx3.drawImage(this,imgx,imgy,50,50); } imgx+=52; }); }
Hello World, 2017-12-08
  • 打赏
  • 举报
 回复

位置的话，SavedImageCount=0就好了：
<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <meta name="viewport" content="width=400">

    <style type="text/css">

        body {

            margin: 0;

            padding: 0;

            text-align: center;

            width: 100%;

            /*background-color: #936;*/

        }



        #canvasId {

            background-color: #FFF;

        }



        .button {

            width: 100px;

            height: 40px;

            font-size: 15px;

        }

        /*#imgDiv img{border:2px dashed #238E1B;}*/

    </style>

</head>

<body>

    <!--<h1>写字版</h1>-->

    <canvas id="canvasId" width="400" height="500" style="border: 1px solid #7462CF"></canvas><br />

    <input type="button" value="保存" class="button" onclick="hw.save();" />

    <input type="button" value="清除写字板" class="button" onclick="hw.clear();" />

    <input type="button" value="全部清除" class="button" onclick="hw.clearAll();" />

    <input type="button" value="全部保存" class="button" onclick="hw.saveAll();" />

    <div></div>

    <canvas id="saveImgs" width="400" height="100" style="border:1px green solid"></canvas>

    <script src="../JS/jquery-1.11.1.js"></script>

    <script type="text/javascript">

        function Handwriting(id) {

            this.canvas = document.getElementById(id);

            this.ctx = this.canvas.getContext("2d");

            var on = ("ontouchstart" in document) ? {

                start: "touchstart", move: "touchmove", end: "touchend"

            } : {

                start: "mousedown", move: "mousemove", end: "mouseup"

            };

            this.canvas.addEventListener(on.start, this.downEvent.bind(this), false);

            this.canvas.addEventListener(on.move, this.moveEvent.bind(this), false);

            this.canvas.addEventListener(on.end, this.upEvent.bind(this), false);

            this.canvas.addEventListener("contextmenu", function (e) { e.preventDefault() }, false);

            this.moveFlag = false;

            this.upof = {};

            this.radius = 0;

            this.has = [];

            this.startOf = null;

            this.lineMax = 30;

            this.lineMin = 10;

            this.linePressure = 1;

            this.smoothness = 80;

            this.history = [];

            this.setColor("rgba(0,0,0,0.25)");

            this.SavedImageCount = 0;

            this.saveCanvas = document.getElementById('saveImgs');

        }



        Handwriting.prototype.save = function () {

            var imgData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height).data;

            var lOffset = this.canvas.width, rOffset = 0, tOffset = this.canvas.height, bOffset = 0;

            var hasData = false;

            for (var i = 0; i < this.canvas.width; i++) {

                for (var j = 0; j < this.canvas.height; j++) {

                    var pos = (i + this.canvas.width * j) * 4

                    if (imgData[pos] > 0 || imgData[pos + 1] > 0 || imgData[pos + 2] || imgData[pos + 3] > 0) {

                        bOffset = Math.max(j, bOffset); // 找到有色彩的最下端

                        rOffset = Math.max(i, rOffset); // 找到有色彩的最右端



                        tOffset = Math.min(j, tOffset); // 找到有色彩的最上端

                        lOffset = Math.min(i, lOffset); // 找到有色彩的最左端

                        hasData = true;

                    }

                }

            }

            lOffset++;

            rOffset++;

            tOffset++;

            bOffset++;

            var c = this.saveCanvas;

            var imgWidth = rOffset - lOffset, imgHeight = bOffset - tOffset;

            //转为100*100大小

            var scale = Math.max(imgWidth, imgHeight) / 100;

            //目标大小

            var oWidth = Math.floor(imgWidth / scale), oHeight = Math.floor(imgHeight / scale);

            //仅当大小大于10时才保存

            if (hasData && imgWidth > 10 && imgHeight > 10) {

                //目标位置

                var oX = Math.floor((this.SavedImageCount % 4) * 100);

                var oY = Math.floor(Math.floor(this.SavedImageCount / 4) * 100);

                var ctxs = c.getContext("2d");

                //根据需要增加高度

                if (oY + 100 > Number($(c).attr('height'))) {

                    var imageData = ctxs.getImageData(0, 0, c.width, c.height);// 保存当前图像

                    $(c).attr('height', Number($(c).attr('height')) + 100);

                    ctxs.putImageData(imageData, 0, 0); //重绘大小改变前保存的图像

                }

                //修正位置，绘制在中间

                var oX = Math.floor(oX + (100 - oWidth) / 2);

                var oY = Math.floor(oY + (100 - oHeight) / 2);



                ctxs.drawImage(this.canvas, lOffset, tOffset, imgWidth, imgHeight, oX, oY, oWidth, oHeight);

                this.SavedImageCount++;

            }

            this.history = [];

            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

        }



        Handwriting.prototype.clear = function () {

            this.history = [];

            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

        }



        Handwriting.prototype.clearAll = function () {

            this.history = [];

            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

            this.saveCanvas.height = 100;

            this.SavedImageCount = 0;

        }



        Handwriting.prototype.saveAll = function () {

        }



        //Handwriting.prototype.historyBack = function () {         //清除最后一笔

        //  this.history.pop();

        //  this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height);

        //  for (var i = 0; i < this.history.length; i++) {

        //      var h = this.history[i];

        //      for (var j = 0; j < h.length; j+=3) {

        //          this.ctx.beginPath();

        //          this.ctx.arc(h[j],h[j+1],h[j+2],0,2*Math.PI,true);

        //          this.ctx.fill();

        //      }

        //  }

        //}



        Handwriting.prototype.downEvent = function (e) {

            this.moveFlag = true;

            this.has = [];

            this.upof = this.getXY(e);

            this.startOf = this.upof;

        }



        Handwriting.prototype.moveEvent = function (e) {

            if (!this.moveFlag)

                return;

            e.preventDefault();

            var of = this.getXY(e);

            var up = this.upof;

            var ur = this.radius;

            this.has.unshift({ time: new Date().getTime(), dis: this.distance(up, of) });

            var dis = 0;

            var time = 0;

            for (var n = 0; n < this.has.length - 1; n++) {

                dis += this.has[n].dis;

                time += this.has[n].time - this.has[n + 1].time;

                if (dis > this.smoothness)

                    break;

            }

            var or = Math.min(time / dis * this.linePressure + this.lineMin, this.lineMax) / 2;

            this.radius = or;

            this.upof = of;

            if (dis < 7)

                return;

            if (this.startOf) {

                up = this.startOf;

                ur = or;

                this.startOf = null;

                this.history.push([]);

            }

            var len = Math.ceil(this.distance(up, of) / 2);

            for (var i = 0; i < len; i++) {

                var x = up.x + (of.x - up.x) / len * i;

                var y = up.y + (of.y - up.y) / len * i;

                var r = ur + (or - ur) / len * i;

                this.ctx.beginPath();

                this.ctx.arc(x, y, r, 0, 2 * Math.PI, true);

                this.ctx.fill();

                this.history[this.history.length - 1].push(x, y, r);

            }

        }



        Handwriting.prototype.upEvent = function (e) {

            this.moveFlag = false;

        }



        Handwriting.prototype.getXY = function (e) {

            var et = e.touches ? e.touches[0] : e;

            var x = et.clientX;

            var y = et.clientY;

            return {

                x: x - this.canvas.offsetLeft + (document.body.scrollLeft || document.documentElement.scrollLeft),

                y: y - this.canvas.offsetTop + (document.body.scrollTop || document.documentElement.scrollTop)

            }

        }



        Handwriting.prototype.distance = function (a, b) {

            var x = b.x - a.x, y = b.y - a.y;

            return Math.sqrt(x * x + y * y);

        }



        Handwriting.prototype.setColor = function (c) {

            this.ctx.fillStyle = c;

        }



        var hw = new Handwriting("canvasId");

        hw.setColor("black");//设置画笔颜色

        hw.lineMax = 30;//设置画笔最大线宽

        hw.lineMin = 10;//设置画笔最小线宽

        hw.linePressure = 1.2;//设置画笔笔触压力

        hw.smoothness = 30;//设置画笔笔触大小变化的平滑度。

    </script>

</body>

</html>
自渡96 2017-12-07
  • 打赏
  • 举报
 回复
引用 1 楼 apollokk 的回复:
添加一个画布： <canvas id="saveImgs" width="400" height="100" style="border:1px green solid"></canvas> 添加一个变量：this.SavedImageCount = 0; 修改保存部分代码： 

        Handwriting.prototype.save = function () {
            var imgData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height).data;
            var lOffset = this.canvas.width, rOffset = 0, tOffset = this.canvas.height, bOffset = 0;
            var hasData = false;
            for (var i = 0; i < this.canvas.width; i++) {
                for (var j = 0; j < this.canvas.height; j++) {
                    var pos = (i + this.canvas.width * j) * 4
                    if (imgData[pos] > 0 || imgData[pos + 1] > 0 || imgData[pos + 2] || imgData[pos + 3] > 0) {
                        bOffset = Math.max(j, bOffset); // 找到有色彩的最下端
                        rOffset = Math.max(i, rOffset); // 找到有色彩的最右端

                        tOffset = Math.min(j, tOffset); // 找到有色彩的最上端
                        lOffset = Math.min(i, lOffset); // 找到有色彩的最左端
                        hasData = true;
                    }
                }
            }
            lOffset++;
            rOffset++;
            tOffset++;
            bOffset++;
            var c = document.getElementById("saveImgs");
            var imgWidth = rOffset - lOffset, imgHeight = bOffset - tOffset;
            //转为100*100大小
            var scale = Math.max(imgWidth, imgHeight) / 100;
            //目标大小
            var oWidth = Math.floor(imgWidth / scale), oHeight = Math.floor(imgHeight / scale);
            //仅当大小大于10时才保存
            if (hasData && oWidth > 10 && oHeight > 10) {
                //目标位置
                var oX = Math.floor((this.SavedImageCount % 4) * 100);
                var oY = Math.floor(Math.floor(this.SavedImageCount / 4) * 100);
                var ctxs = c.getContext("2d");
                //根据需要增加高度
                if (oY + 100 > Number($(c).attr('height'))) {
                    var imageData = ctxs.getImageData(0, 0, c.width, c.height);// 保存当前图像
                    $(c).attr('height', Number($(c).attr('height')) + 100);
                    ctxs.putImageData(imageData, 0, 0); //重绘大小改变前保存的图像
                }
                //修正位置，绘制在中间
                var oX = Math.floor(oX + (100 - oWidth) / 2);
                var oY = Math.floor(oY + (100 - oHeight) / 2);

                ctxs.drawImage(this.canvas, lOffset, tOffset, imgWidth, imgHeight, oX, oY, oWidth, oHeight);
                this.SavedImageCount++;
            }
            this.history = [];
            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        }
报错的问题我解决了还有一个问题就是我清空下面画布中的内容，再次在上面的画面中绘画然后保存，下面画布中显示的图片位置有问题，显示在了刚才没清空图片的后面，能不能再我点击全部清除后初始话下面图片的插入位置
自渡96 2017-12-07
  • 打赏
  • 举报
 回复
引用 1 楼 apollokk 的回复:
添加一个画布： <canvas id="saveImgs" width="400" height="100" style="border:1px green solid"></canvas> 添加一个变量：this.SavedImageCount = 0; 修改保存部分代码： 

        Handwriting.prototype.save = function () {
            var imgData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height).data;
            var lOffset = this.canvas.width, rOffset = 0, tOffset = this.canvas.height, bOffset = 0;
            var hasData = false;
            for (var i = 0; i < this.canvas.width; i++) {
                for (var j = 0; j < this.canvas.height; j++) {
                    var pos = (i + this.canvas.width * j) * 4
                    if (imgData[pos] > 0 || imgData[pos + 1] > 0 || imgData[pos + 2] || imgData[pos + 3] > 0) {
                        bOffset = Math.max(j, bOffset); // 找到有色彩的最下端
                        rOffset = Math.max(i, rOffset); // 找到有色彩的最右端

                        tOffset = Math.min(j, tOffset); // 找到有色彩的最上端
                        lOffset = Math.min(i, lOffset); // 找到有色彩的最左端
                        hasData = true;
                    }
                }
            }
            lOffset++;
            rOffset++;
            tOffset++;
            bOffset++;
            var c = document.getElementById("saveImgs");
            var imgWidth = rOffset - lOffset, imgHeight = bOffset - tOffset;
            //转为100*100大小
            var scale = Math.max(imgWidth, imgHeight) / 100;
            //目标大小
            var oWidth = Math.floor(imgWidth / scale), oHeight = Math.floor(imgHeight / scale);
            //仅当大小大于10时才保存
            if (hasData && oWidth > 10 && oHeight > 10) {
                //目标位置
                var oX = Math.floor((this.SavedImageCount % 4) * 100);
                var oY = Math.floor(Math.floor(this.SavedImageCount / 4) * 100);
                var ctxs = c.getContext("2d");
                //根据需要增加高度
                if (oY + 100 > Number($(c).attr('height'))) {
                    var imageData = ctxs.getImageData(0, 0, c.width, c.height);// 保存当前图像
                    $(c).attr('height', Number($(c).attr('height')) + 100);
                    ctxs.putImageData(imageData, 0, 0); //重绘大小改变前保存的图像
                }
                //修正位置，绘制在中间
                var oX = Math.floor(oX + (100 - oWidth) / 2);
                var oY = Math.floor(oY + (100 - oHeight) / 2);

                ctxs.drawImage(this.canvas, lOffset, tOffset, imgWidth, imgHeight, oX, oY, oWidth, oHeight);
                this.SavedImageCount++;
            }
            this.history = [];
            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        }
你的代码我加进去后，写字保存到下面的canvas有很明显的锯齿痕迹（这个能解决吗）,而且我点击全部清除按钮在重新写保存后会报错
自渡96 2017-12-07
  • 打赏
  • 举报
 回复
引用 2 楼 jslang 的回复:
canvas元素本身就可以当作一张图片。用drawImage()方法绘制到另一个canvas元素中。 ctx = canvas1.getContext("2d") ctx.drawImage(canvas2,sx,sy,swidth,sheight,x,y,width,height);
插进去了，可是插入后重叠在一起了，要怎么办。我用+=更改每次每次插入位置，可是没效果
引用 2 楼 jslang 的回复:
canvas元素本身就可以当作一张图片。用drawImage()方法绘制到另一个canvas元素中。 ctx = canvas1.getContext("2d") ctx.drawImage(canvas2,sx,sy,swidth,sheight,x,y,width,height);
引用 2 楼 jslang 的回复:
canvas元素本身就可以当作一张图片。用drawImage()方法绘制到另一个canvas元素中。 ctx = canvas1.getContext("2d") ctx.drawImage(canvas2,sx,sy,swidth,sheight,x,y,width,height);
已经实现了上面的canvas保存成图片后插入到下面的canvas,现在问题是canvas生成的图片已经设定了大小，可是插入到下面canvas中的图片和上面的画布一样大（我尺寸设置的很小），这是插入的代码 var c = document.createElement("canvas"); c.width = rOffset-lOffset; c.height = bOffset-tOffset; var ctxs = c.getContext("2d"); ctxs.drawImage(this.canvas,lOffset, tOffset, c.width, c.height, 0, 0, c.width, c.height); var url=c.toDataURL('image/png'), imgDiv=document.getElementById('imgDiv'); img=new Image(); img.src=url; img.width="50"; var bs=c.width/c.height; img.height="50"; imgDiv.appendChild(img); this.history = []; this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height); var c1=document.getElementById("myCanvas"); var ctx3 = c1.getContext("2d"); var imgx = 0; var imgy = 0; $('#imgDiv img').each(function(){ //jquery.each()循环读取所有图片 this.onload = function(){ ctx3.drawImage(this,imgx,imgy); } imgx+=50; imgy+=50; alert(typeof(imgx)) }); }
引用 1 楼 apollokk 的回复:
添加一个画布： <canvas id="saveImgs" width="400" height="100" style="border:1px green solid"></canvas> 添加一个变量：this.SavedImageCount = 0; 修改保存部分代码： 

        Handwriting.prototype.save = function () {
            var imgData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height).data;
            var lOffset = this.canvas.width, rOffset = 0, tOffset = this.canvas.height, bOffset = 0;
            var hasData = false;
            for (var i = 0; i < this.canvas.width; i++) {
                for (var j = 0; j < this.canvas.height; j++) {
                    var pos = (i + this.canvas.width * j) * 4
                    if (imgData[pos] > 0 || imgData[pos + 1] > 0 || imgData[pos + 2] || imgData[pos + 3] > 0) {
                        bOffset = Math.max(j, bOffset); // 找到有色彩的最下端
                        rOffset = Math.max(i, rOffset); // 找到有色彩的最右端

                        tOffset = Math.min(j, tOffset); // 找到有色彩的最上端
                        lOffset = Math.min(i, lOffset); // 找到有色彩的最左端
                        hasData = true;
                    }
                }
            }
            lOffset++;
            rOffset++;
            tOffset++;
            bOffset++;
            var c = document.getElementById("saveImgs");
            var imgWidth = rOffset - lOffset, imgHeight = bOffset - tOffset;
            //转为100*100大小
            var scale = Math.max(imgWidth, imgHeight) / 100;
            //目标大小
            var oWidth = Math.floor(imgWidth / scale), oHeight = Math.floor(imgHeight / scale);
            //仅当大小大于10时才保存
            if (hasData && oWidth > 10 && oHeight > 10) {
                //目标位置
                var oX = Math.floor((this.SavedImageCount % 4) * 100);
                var oY = Math.floor(Math.floor(this.SavedImageCount / 4) * 100);
                var ctxs = c.getContext("2d");
                //根据需要增加高度
                if (oY + 100 > Number($(c).attr('height'))) {
                    var imageData = ctxs.getImageData(0, 0, c.width, c.height);// 保存当前图像
                    $(c).attr('height', Number($(c).attr('height')) + 100);
                    ctxs.putImageData(imageData, 0, 0); //重绘大小改变前保存的图像
                }
                //修正位置，绘制在中间
                var oX = Math.floor(oX + (100 - oWidth) / 2);
                var oY = Math.floor(oY + (100 - oHeight) / 2);

                ctxs.drawImage(this.canvas, lOffset, tOffset, imgWidth, imgHeight, oX, oY, oWidth, oHeight);
                this.SavedImageCount++;
            }
            this.history = [];
            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        }
Handwriting.prototype.save = function () { var imgData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height).data; var lOffset = this.canvas.width, rOffset = 0,tOffset = this.canvas.height, bOffset = 0; for (var i = 0; i < this.canvas.width; i++) { for (var j = 0; j < this.canvas.height; j++) { var pos = (i + this.canvas.width * j) * 4 if (imgData[pos] > 0 || imgData[pos + 1] > 0 || imgData[pos + 2] || imgData[pos + 3] > 0) { bOffset = Math.max(j, bOffset); // 找到有色彩的最下端 rOffset = Math.max(i, rOffset); // 找到有色彩的最右端 tOffset = Math.min(j, tOffset); // 找到有色彩的最上端 lOffset = Math.min(i, lOffset); // 找到有色彩的最左端 } } } lOffset++; rOffset++; tOffset++; bOffset++; var c = document.createElement("canvas"); c.width = rOffset-lOffset; c.height = bOffset-tOffset; var ctxs = c.getContext("2d"); ctxs.drawImage(this.canvas,lOffset, tOffset, c.width, c.height, 0, 0, c.width, c.height); var url=c.toDataURL('image/png'), imgDiv=document.getElementById('imgDiv'); img=new Image(); img.src=url; img.width="50"; var bs=c.width/c.height; img.height="50"; imgDiv.appendChild(img); this.history = []; this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height); var c1=document.getElementById("myCanvas"); var ctx3 = c1.getContext("2d"); var imgx = 0; var imgy = 0; 下面的代码是哪里错了吗，为什么我插进去的图片和上面的画布一样大，明明改了图片的大小了 $('#imgDiv img').each(function(){ //jquery.each()循环读取所有图片 this.onload = function(){ ctx3.drawImage(this,imgx,imgy); } imgx+=50; imgy+=50; alert(typeof(imgx)) }); }
天际的海浪 2017-12-07
  • 打赏
  • 举报
 回复
canvas元素本身就可以当作一张图片。用drawImage()方法绘制到另一个canvas元素中。 ctx = canvas1.getContext("2d") ctx.drawImage(canvas2,sx,sy,swidth,sheight,x,y,width,height);
Hello World, 2017-12-07
  • 打赏
  • 举报
 回复
添加一个画布： <canvas id="saveImgs" width="400" height="100" style="border:1px green solid"></canvas> 添加一个变量：this.SavedImageCount = 0; 修改保存部分代码： 

        Handwriting.prototype.save = function () {
            var imgData = this.ctx.getImageData(0, 0, this.canvas.width, this.canvas.height).data;
            var lOffset = this.canvas.width, rOffset = 0, tOffset = this.canvas.height, bOffset = 0;
            var hasData = false;
            for (var i = 0; i < this.canvas.width; i++) {
                for (var j = 0; j < this.canvas.height; j++) {
                    var pos = (i + this.canvas.width * j) * 4
                    if (imgData[pos] > 0 || imgData[pos + 1] > 0 || imgData[pos + 2] || imgData[pos + 3] > 0) {
                        bOffset = Math.max(j, bOffset); // 找到有色彩的最下端
                        rOffset = Math.max(i, rOffset); // 找到有色彩的最右端

                        tOffset = Math.min(j, tOffset); // 找到有色彩的最上端
                        lOffset = Math.min(i, lOffset); // 找到有色彩的最左端
                        hasData = true;
                    }
                }
            }
            lOffset++;
            rOffset++;
            tOffset++;
            bOffset++;
            var c = document.getElementById("saveImgs");
            var imgWidth = rOffset - lOffset, imgHeight = bOffset - tOffset;
            //转为100*100大小
            var scale = Math.max(imgWidth, imgHeight) / 100;
            //目标大小
            var oWidth = Math.floor(imgWidth / scale), oHeight = Math.floor(imgHeight / scale);
            //仅当大小大于10时才保存
            if (hasData && oWidth > 10 && oHeight > 10) {
                //目标位置
                var oX = Math.floor((this.SavedImageCount % 4) * 100);
                var oY = Math.floor(Math.floor(this.SavedImageCount / 4) * 100);
                var ctxs = c.getContext("2d");
                //根据需要增加高度
                if (oY + 100 > Number($(c).attr('height'))) {
                    var imageData = ctxs.getImageData(0, 0, c.width, c.height);// 保存当前图像
                    $(c).attr('height', Number($(c).attr('height')) + 100);
                    ctxs.putImageData(imageData, 0, 0); //重绘大小改变前保存的图像
                }
                //修正位置，绘制在中间
                var oX = Math.floor(oX + (100 - oWidth) / 2);
                var oY = Math.floor(oY + (100 - oHeight) / 2);

                ctxs.drawImage(this.canvas, lOffset, tOffset, imgWidth, imgHeight, oX, oY, oWidth, oHeight);
                this.SavedImageCount++;
            }
            this.history = [];
            this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
        }
氮化铝，全球前24强生产商排名及市场份额（by QYResearch）.pdf
氮化铝，全球前24强生产商排名及市场份额（by QYResearch）.pdf
laowang111101_PArPSWzetq_837556_1772865686767.zip
laowang111101_PArPSWzetq_837556_1772865686767.zip
HCIA-Cloud Service云服务 V3.0培训文档及实验手册.zip
HCIA-Cloud Service【云服务】 V3.0培训文档 HCIA-Cloud Service【云服务】 V3.0实验手册
（100页PPT）投资项目评估与管理.ppt
（100页PPT）投资项目评估与管理.ppt
ssm教师工作考核绩效管理系统(文档+源码)_kaic.zip
计算机毕业设计
JavaScript

87,994

社区成员

224,689

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章