Javascript 保存在画布上绘制的图像_Javascript_Jquery_Html_Css_Html5 Canvas

Javascript 保存在画布上绘制的图像

javascript jquery html css html5-canvas

Javascript 保存在画布上绘制的图像,javascript,jquery,html,css,html5-canvas,Javascript,Jquery,Html,Css,Html5 Canvas,我有一个简单的HTML应用程序，可以在HTML5画布上绘制。我有一个保存按钮，在这里我使用canvas.todataURL捕获图像。当我在web浏览器中打开此链接时，不会显示完整的图形，只显示图形的一部分。下面是我的代码。试试看，没什么意义 JSFIDDLE： var mousePressed=false； var lastX，lastY； var-ctx； $（窗口）.on（'load'，function（）{ canv=document.getElementById（'myCanvas'）

我有一个简单的HTML应用程序，可以在HTML5画布上绘制。我有一个保存按钮，在这里我使用

canvas.todataURL

捕获图像。当我在web浏览器中打开此链接时，不会显示完整的图形，只显示图形的一部分。下面是我的代码。试试看，没什么意义

JSFIDDLE：


var mousePressed=false；
var lastX，lastY；
var-ctx；
$（窗口）.on（'load'，function（）{
canv=document.getElementById（'myCanvas'）；
ctx=canv.getContext（“2d”）；
canv.width=$（window.width（）；
canv.高度=1000；
$（'#myCanvas'）.mousedown（函数（e）{
鼠标按下=真；
//绘制（e.pageX-$（this.offset（）.left，e.pageY-$（this.offset（）.top，false）；
绘制（e.pageX，e.pageY，false）；
});
$（'#myCanvas'）.mousemove（函数（e）{
如果（鼠标按下）{
//绘制（e.pageX-$（this.offset（）.left，e.pageY-$（this.offset（）.top，true））；
绘制（e.pageX，e.pageY，true）；
}
});
$（'#myCanvas'）.mouseup（函数（e）{
鼠标按下=错误；
});
$（'#myCanvas'）.mouseleave（函数（e）{
鼠标按下=错误；
});
});
功能图（x、y、isDown）{
如果（isDown）{
ctx.beginPath（）；
ctx.strokeStyle=“蓝色”；
ctx.lineWidth=$（'#selWidth'）.val（）；
ctx.lineJoin=“圆形”；
ctx.moveTo（lastX，lastY）；
ctx.lineTo（x，y）；
ctx.closePath（）；
ctx.stroke（）；
}
lastX=x；lastY=y；
}
函数next（）{
var canvas=document.getElementById（'myCanvas'）；
var image=canvas.toDataURL（“image/png”）；//这里是最重要的部分，因为如果不替换，将出现DOM 18异常。
console.log（图像）；
//html2canvas（document.querySelector（“#myCanvas”））。然后（canvas=>{
//document.body.appendChild（画布）；
//警报（“dasds”）；
// });
}
函数clearArea（）{
//清除画布时使用标识矩阵
setTransform（1,0,0,1,0,0）；
clearRect（0，0，ctx.canvas.width，ctx.canvas.height）；
}
净空面积
保存（打印到控制台日志）
身体{
溢出：隐藏；
}
#我的画布
{
背景色：#fff；
位置：绝对位置；
*/背景重复：无重复；
}
.控制
{
位置：绝对位置；
顶部：0px；
右：0px；
宽度：600px；
背景色：#2277dd；
填充物：5px；
保证金：2倍；
颜色：#fff；
-webkit边界半径：3px；
边界半径：3px；
}

确保按下开发人员工具控制台选项卡中的“显示更多”按钮，否则可能只复制部分输出字符串（根据asdadsads的注释）

在某些情况下，显示截止base64字符串将导致错误消息，而在其他情况下（如您的），将显示图像的一部分

或者，只需使用“复制”按钮，它将复制整个输出。

我强烈建议您查看有关该内容的文档：@FeaturedSpace是的，我确实这样做了，我完全按照他们的代码进行了操作。除非我有误解，否则当我复制控制台输出并粘贴到Mac.var image=canvas.toDataURL（“image/png”）上的Chrome74时，我会得到完整的图像；你知道返回一个base64编码的值，对吗？什么？？不可能。我也使用Mac和Chrome74。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>

<script>
var mousePressed = false;
var lastX, lastY;
var ctx;

$(window).on('load', function() { 
  canv = document.getElementById('myCanvas');
  ctx = canv.getContext("2d");
  canv.width  = $(window).width();
  canv.height = 1000;

  $('#myCanvas').mousedown(function (e) {
    mousePressed = true;
    //Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
    Draw(e.pageX, e.pageY, false);
  });

  $('#myCanvas').mousemove(function (e) {
    if (mousePressed) {
      //Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
      Draw(e.pageX , e.pageY , true);
    }
  });

  $('#myCanvas').mouseup(function (e) {
    mousePressed = false;
  });
  $('#myCanvas').mouseleave(function (e) {
    mousePressed = false;
  });


});

function Draw(x, y, isDown) {
  if (isDown) {
    ctx.beginPath();
    ctx.strokeStyle = "blue";
    ctx.lineWidth = $('#selWidth').val();
    ctx.lineJoin = "round";
    ctx.moveTo(lastX, lastY);
    ctx.lineTo(x, y);
    ctx.closePath();
    ctx.stroke();
  }
  lastX = x; lastY = y;
}

function next(){

    var canvas = document.getElementById('myCanvas');

    var image = canvas.toDataURL("image/png");  // here is the most important part because if you dont replace you will get a DOM 18 exception.
    console.log(image);

    // html2canvas(document.querySelector("#myCanvas")).then(canvas => {
    //     document.body.appendChild(canvas);
    //     alert("dasds");
    // });

}

function clearArea() {
  // Use the identity matrix while clearing the canvas
  ctx.setTransform(1, 0, 0, 1, 0, 0);
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
</script>
<body>
 <canvas id="myCanvas"></canvas>
  <div class="controls">     
    <button onclick="javascript:clearArea();return false;">Clear Area</button>
    <button onclick="javascript:next();return false;">Save (Print to Console Log)</button>
    <!-- Line width : <select id="selWidth">
    <option value="1">1</option>
    <option value="3">3</option>
    <option value="5" selected="selected">5</option>
    <option value="7">7</option>
    <option value="9">9</option>
    <option value="11">11</option>
    </select>
    Color : <select id="selColor">
    <option value="black">black</option>
    <option value="blue" selected="selected">blue</option>
    <option value="red">red</option>
    <option value="green">green</option>
    <option value="yellow">yellow</option>
    <option value="gray">gray</option>
    </select> -->
  </div>

</body>
  <style>
body{
  overflow:hidden;
}
#mycanvas
{
  background-color:#fff;
  position:absolute;
*/  background-repeat:   no-repeat;
}
.controls
{
  position:absolute;
  top:0px;
  right:0px;
  width: 600px;
  background-color:#2277dd;
  padding:5px;
  margin:2px;
  color:#fff;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}
</style>