A. 关于利用canvas截取图片的问题
取得imgData数据后，创建一个新的CANVAS把数据写进去。然后保存。
B. 通过js保存图片到本地中遇到的跨域问题
<html>
<metahttp-equiv="X-UA-Compatible"content="chrome=1">
<head>
<script>
window.onload=function(){
draw();
varsaveButton=document.getElementById("saveImageBtn");
bindButtonEvent(saveButton,"click",saveImageInfo);
vardlButton=document.getElementById("downloadImageBtn");
bindButtonEvent(dlButton,"click",saveAsLocalImage);
};
functiondraw(){
varcanvas=document.getElementById("thecanvas");
varctx=canvas.getContext("2d");
ctx.fillStyle="rgba(125,46,138,0.5)";
ctx.fillRect(25,25,100,100);
ctx.fillStyle="rgba(0,146,38,0.5)";
ctx.fillRect(58,74,125,100);
ctx.fillStyle="rgba(0,0,0,1)";//blackcolor
ctx.fillText("Gloomyfish-Demo",50,50);
}
functionbindButtonEvent(element,type,handler)
{
if(element.addEventListener){
element.addEventListener(type,handler,false);
}else{
element.attachEvent('on'+type,handler);
}
}
functionsaveImageInfo()
{
varmycanvas=document.getElementById("thecanvas");
varimage=mycanvas.toDataURL("image/png");
varw=window.open('about:blank','imagefromcanvas');
w.document.write("<imgsrc='"+image+"'alt='fromcanvas'/>");
}
functionsaveAsLocalImage(){
varmyCanvas=document.getElementById("thecanvas");
//tion.
//varimage=myCanvas.toDataURL("image/png").replace("image/png","image/octet-stream;Content-Disposition:attachment;filename=foobar.png");
varimage=myCanvas.toDataURL("image/png").replace("image/png","image/octet-stream");
window.location.href=image;//itwillsavelocally
}
</script>
</head>
<bodybgcolor="#E6E6FA">
<div>
<canvaswidth=200height=200id="thecanvas"></canvas>
<buttonid="saveImageBtn">SaveImage</button>
<buttonid="downloadImageBtn">DownloadImage</button>
</div>
</body>
</html>
好像这个可以 不错 你试一试吧 把下载下来的文件 重命名 为 图片格式 就可以预览啦
C. 如何用js新建一个canvas
用js新建canvas的方法如下：
var canvas = document.createElement('canvas');
canvas.id = "CursorLayer";
canvas.width = 1224;
canvas.height = 768;
canvas.style.zIndex = 8;
canvas.style.position = "absolute";
canvas.style.border = "1px solid";
document.body.appendChild(canvas);
注意：此处一定要追加到body里面。
D. 前端pdf图片转canvas展示问题
可能是图片格式有问题。
canvas可以加载的图片会根据类型读取，如果图片格式不正确，可能会导致显示异常。
可以使用图片软件打开图片看看是否正常，或者用软件转换一下。
E. web前端中 对于canvas了解多少
Canvas的绘制模型
有的时候使用Canvas，你得对它有一个很好的理解才行，这包括了Canvas究竟是如何绘制图形、图像和文本的。要想了解这部分内容，则需要理解阴影、Alpha通道、剪辑区域及图像合成等内容。
在向Canvas之上绘图形或图像时，浏览器要按照如下步骤操作：
1>将图形或图像绘制到一个无限大的透明位图中，在绘制时遵从当前的填充模式、描边模式以及线条样式。
2>将图形或图像的阴影绘制到另外一幅位图中，在绘制时使用当前绘图环境的阴影设定。
3>将阴影中每一个像素的alpha分量乘以绘图环境对象的globalAlpha属性值。
4>将绘有阴影的位图与经过剪辑区域剪切过的canvas进行图像合成。在操作时使用当前的合成模式参数。
5>将图形或图像的每一个像素颜色分量，乘以绘图环境对象的globalAlpha属性值 。
6>将绘有图形或图像的位图，合成到当前经过剪辑区域萧索的canvas位图之上，在操作时使用当前的合成操作符。
F. 前端笔记 — canvas
在HTML中添加<canvas>元素，必须设置width跟height属性
如果浏览器不支持canvas元素，就会显示标签中间的内容
要在画布上绘图，需要取得绘图上下文，调用getContext('2d')就可以取得canvas的2d上下文
使用toDataURL方法可以导出canvas上绘制的图像，接受一个参数，图像的MIME类型格式
常用的属性控制
矩形是唯一一种可以直接在上下文中绘制的形状
与矩形有关的方法包括fillRect()、strokeRect()和clearRect()，这三个方法接受4个参数（x, y, width, height）
fillRect()绘制的矩形会填充指定的颜色，颜色通过fillStyle属性指定
strokeRect()绘制的矩形会使用指定的颜色描边，描边颜色通过strokeStyle属性指定
clearRect()方法用于清除画布上的矩形区域
要绘制路径，首选必须调用beginPath()方法，表示开始绘制新路径，绘制路径主要有以下方法
调用closePath()可以将路径的起点与终点连接。路径完成后，可以使用fill()填充，或者使用stroke()描边。最后还可以调用clip()，在路径上创建一个剪切区域
绘制文本主要有两个方法，fillText()和strokeText()，这个两个方法接受4个参数：要绘制的文本字符串、x坐标、y坐标和可选的最大像素宽度。这两个方法都以下列3个属性为基础
上下文提供了辅助确定文本大小的方法measureText()，这个方法接受一个参数，即要绘制的文本，返回一个TextMetrics对象，这个对象有一个width属性，表示文本的宽度
为上下文应用变换，会导致使用不同的变换矩阵应用处理，从而产生不同的结果，可以通过如下方法来修改变换矩阵
如果想把一副图像绘制到画布上，可以使用drawImage()方法，调用这个方法时，可以使用三种不同的参数组合，最简单的方式是传入一个<img>元素，以及绘制该图像的起点x和y坐标
可以多传入两个参数，表示目标宽度和高度
还可以把图像中的某个区域绘制到上下文中，需要传入9个参数：要绘制的图像、源图像的x坐标、源图像的y坐标、源图像的宽度、源图像的高度、目标图像的x坐标、目标图像的y坐标、目标图像的宽度、目标图像的高度
除了给drawImage()方法传入<img>元素外，还可以传入另一个<canvas>元素作为其第一个参数。结合drawImage()和其他方法，可以对图像进行各种基本操作，操作的结果可以通过toDataURL()方法获得，toDataURL()是canvas的方法而不是上下文的方法
上下文会根据以下几个属性，自动为形状或路径绘制阴影，需要在绘制路径之前设置
渐变有CanvasGradient实例表示，要创建一个新的线性渐变，可以调用createLinearGradient()方法，接受4个参数：startX、startY、endX、endY。创建渐变后，使用addColorStop()方法来指定色标，接受两个参数：色标位置和css颜色值。色标位置是一个0（开始的颜色）到1（结束的颜色）之间的数字
表示从一个画布上的点(30, 30)到点(70, 70)的渐变。起点的色标是白色，终点的色标是黑色。然后可以把fillStyle或者strokeStyle设置为这个对象，从而使用渐变来绘制形状或描边
要创建径向渐变，可以使用createRadialGradient()方法，接受6个参数，对应着两个圆的圆心和半径
模式其实就是重复的图像，可以用来填充或描边图像，使用createPattern()方法并传入两个参数：一个<img>元素和一个表示如何重复图像的字符串。其中第二个参数的值与css的background-repeat属性值相同，包括“repeat”、“repeat-x”、“repeat-y”和“no-repeat”
模式与渐变一样，都是从画布的原点(0, 0)开始的，将填充样式设置为模式对象，只表示在某个特定的区域内显示重复的图像，而不是要从某个位置开始绘制重复图像
上下文可以通过getImageData(x, y, width, height)取得原始图像数据
这里返回的对象是ImageData的实例，每个ImageData对象都有三个属性：width、height和data。其中data是一个数组，保存着图像中每一个像素的数据。
在data数组中，每一个像素用4个元素来保存，分别表示红、绿、蓝和透明度。因此第一个像素的数据保存在数组的第0到第3个元素中，数组中的每个元素的值都介于0到255之间（包括0和255）
putImageData()方法可以将imageData表示的图像绘制到画布上
globalAlpha：用于指定所有绘制的透明度，是一个介于0到1之间的值，默认值为1
如果所有的后续操作都要基于相同的透明度，可以先把globalAlpha设置为适当的值，然后绘制
globalCompositionOperation：表示后绘制的图形怎样与先绘制的图形结合，可能的值如下
G. canvas前端动图如何实现
Canvas是HTML5中的重要组成部分，用于绘制简单的图形，定义路径，创建渐变及应用图像变换，如何用Canvas制作动画也是很多人都有的疑问。
01
什么是动画？我们在绘制动画之前必须要弄清楚什么是动画，一个动画最起码需要哪些基本条件呢？我们可以用一个工具展示动画是什么。这是利用PPT绘制出的一个动画效果
这样我们就通过Canvas做出一个简单的动态图形了
如果你想要学习更多的新知识
如果你想要分享自己的心得
如果你热爱前端渴望提升