⑴ 求助一下各位大大html5 canvas 缩放的时候会出现锯齿
canvas画出来的图片是位图，位图在放大的情况下是会模糊的，然而你所说的“缩放”应该是在canvas宽高固定后通过改变其style样式表进行放大缩小，当然图片是放大了，可是也模糊了，因为不是矢量图呀。
⑵ 前端把图片压缩转换成base64编码把值赐予input='hidden' 之后提交给后台. HTML5,PHP,javascript,canvas
缺点你无法直接验证传来的base64数据的完整性，比如大小，文件头之类的，还需要自己来实现。
⑶ html5之canvas困惑
canvas相当于一张图片，css设置的属性相当于对这张图片进行拉伸变化。要改变canvas的大小，应当用这种方式
<canvas width=500 height=400></canvas>
对应的javascript是
canvas=document.getElementsByTagName('canvas')[0];
canvas.width=500;
canvas.height=400;
换句话说，你现在画出的1px的线条实际显示的是在默认大小上经过拉伸变换的样子。
⑷ HTML5中canvas图片加载的问题
getImageData方法不支持file协议，确定本地启了服务。另外最好把控制台的错误代码贴出来，这样方便大家找bug。
⑸ html5的canvas怎么调整画图的清晰度
不光绘制图片，在高分屏下，绘制文字和线条都会出现模糊的现象，GitHub上有一个hidpi-canvas-polyfill可以很好的解决这个问题，但是没有对图片进行处理。如果你了解了原因，解决这个问题也很容易。
首先，引入上方这个polyfill;
然后，得到devicePixelRatio和backingStorePixelRatio的比例，可以使用下面的方法
var getPixelRatio = function(context) {
var backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
};
//调用
var ratio = getPixelRatio(ctx);
之后，在调用ctx.drawImage()的时候，给width和height乘以ratio，如下：
1
ctx.drawImage(document.querySelector('img'), 10, 10, 300 * ratio, 90 * ratio);
⑹ html5怎么压缩图片
利用canvas的drawImage方法来绘制图片，并且设置绘制的图片的width跟height，最后再通过canvas的toDataURL方法来生成压缩后的dataUR
下面直接上代码：
html:
[html]view plain
<divclass="head_imgpr">
<emclass="pa"></em>
<imgsrc='../images/icon_touxiang.png'alt=""class="modify_img"/>
<inputid="photo"type="file"accept="image/*"/>
</div>
⑺ html5 canvas问题
原因是你浏览器卡,图片没读出来,等一会就行了,或者用我写的代码
<!DOCTYPE HTML>
<html>
<body>
<head>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
window.onload = function(){
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image();
img.src="http://www.w3school.com.cn/i/eg_flower.png";
cxt.drawImage(img,0,0);
}
</script>
</head>
</body>
</html>
⑻ html5 canvas在img标签的图片上绘制矩形框、矩形框为1px时线条模糊问题
前端需要在后端返回的图片集合里，根据提供的对角线坐标绘制矩形。矩形可能是多个。效果达到如下：
1、根据后端返回的图片list，生成canvas画布，
2、把图片画到canvas里面，再根据后端返回的坐标，在canvas里画矩形框。
此项目中，后端返回的坐标是基于缩略图的，但是前端渲染在页面上的图片，会按宽为788px来显示，所以坐标应该要按照比例来算。
真实的左上x点的计算方式为：真实宽 / 压缩宽 * 压缩x点
https://blog.csdn.net/qq_29594393/article/details/52849339
https://www.runoob.com/w3cnote/html5-canvas-intro.html
https://www.imooc.com/wenda/detail/551496
https://blog.csdn.net/qq_44907926/article/details/114907056?spm=1001.2014.3001.5501
①画矩形时，如果里面的参数有不是整数的话，容易导致边框粗细不一等问题。
②当矩形的边框lineWidth设置为1px时候，会出现线条模糊的问题。
关于第②个问题的延申：
这是测试提给我的bug：
我的思路存在的问题：
首先，同样是矩形的边框我同样设置的都是1px，不应该有的线条颜色深，有的颜色淡啊，排除了参数没有取整的问题后，我怀疑了颜色red在画布上的渲染问题，换成十六进制的同样有问题。就在我一筹莫展的时候，我叫来了小伙伴，我说你看这线条颜色是不是不一样，我开始怀疑我的眼神有问题。小伙伴说，你给线条整粗点看看这问题明显吗。我把边框线条设置了2px，发现和1px的粗细是一样的，并且颜色一样了线条不模糊了。换成别的宽度，只要不是1px都没有问题了。
思维的问题在于，我网络问题的描述有问题，我之前一直搜canvas绘制矩形线条深浅不一，我应该搜canvas矩形线条模糊。我排查问题的时候，固定思维模式觉得1px写的没错，却没有尝试排查。
关于这个问题的详细解答与解决办法：
canvas1px线条模糊
我的理解
canvas的线条画法不一样，canvas的每条线都有一条无限细的“中线”，线条的宽度是从中线向两侧延伸的，也就是说canvas绘制1px的时候，是中线向左右两边延申各取0.5，并不是向某一边延申（如果只是往右延申就不再是问题了），此时问题出现了，计算机不允许出现小于1px的图形，所以他做了一个折中的事：把这两个像素都绘制了。所以，如此一来，本来1px的线条，就成了看起来2px宽的线条。
延申：
HTML 5 Canvas详细讲解 ———— 第二篇（清除canvas画布上指定区域+橡皮擦功能实现；在画布上平铺指定图片；在画布上绘制文本；总结案例之刮刮乐功能实现）
⑼ HTML5如何通过canvas，把两张图片绘制到画布，然后导出大图
<imgsrc="......."id="img1"/>
<imgsrc="......."id="img2"/>
<imgid="img3"/>
varimg1=document.getElementById("img1"),
img2=document.getElementById("img2"),
img3=document.getElementById("img3");
varcanvas=document.createElement("canvas"),
context=canvas.getContext("2d");
canvas.width=img1.naturalWidth+img2.naturalWidth;
canvas.height=Math.max(img1.naturalHeight,img2.naturalHeight);
//将img1加入画布
context.drawImage(img1,0,0,img1.naturalWidth,img1.naturalHeight);
//将img2加入画布
context.drawImage(img1,img2.naturalWidth,0,img2.naturalWidth,img2.naturalHeight);
//将画布内容导出
varsrc=canvas.toDataURL();
img3.src=src;<p>drawImage的使用方法可以去这里看一下</p>
<ahref="https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage"/>
⑽ 如何使用HTML5 Canvas动态的绘制拓扑图
//需要自己引入jQuery
<!DOCTYPEhtml><html><head>
<scripttype="text/javascript"src="jquery-3.0.0.js"></script>
<scripttype="text/javascript">
//是否可以进行直线标记
varflag=false;
//是否可以进行圆圈标记
varflag1=false;
//是否可以进行文字标记
varflag2=false;
//标记的开始坐标
varx1=-10000;
vary1=-10000;
//标记的结束坐标
varx2=-10000;
vary2=-10000;
//查找所有图片,动态创建画布
functionnewCanvas(){
//查找所有图片，并且生成画布
$("#body").find("img").each(function(i,e){
//获取图片长度宽度
varimgWidth=$(this).attr("width");
varimgHeight=$(this).attr("height");
//根据图片动态创建画布
varcanvas=document.createElement("canvas");
canvas.width=imgWidth;
canvas.height=imgHeight;
canvas.id="canvas"+i;
$(canvas).css("border","1pxsolid#d3d3d3");
document.getElementById("myCan").appendChild(canvas);
//获取画布
varc=document.getElementById("canvas"+i);
varctx=c.getContext("2d");
//给画布绘制图片
varimgId=$(this).attr("id");
varimg=document.getElementById(imgId);
$(img).ready(function(){
ctx.drawImage(img,0,0,imgWidth,imgHeight);
});
});
}
//动态清空所有画布
functionclearCanvas(){
//查找所有图片，并且清空画布
$("#body").find("img").each(function(i,e){
//获取图片长度宽度
varimgWidth=$(this).attr("width");
varimgHeight=$(this).attr("height");
//获取图片元素
varimg=e;
//查找所有画布
$("#body").find("canvas").each(function(i,e){
//获取画布
varc=e;
varctx=c.getContext("2d");
//绘制一个纯白色画布
ctx.clearRect(0,0,imgWidth,imgHeight);
//重新将原图片加入到画布中
ctx.drawImage(img,0,0,imgWidth,imgHeight);
});
});
}
//动态获取所有画布的Base64压缩数据
functionCanvas(){
//查找所有画布
$("#body").find("canvas").each(function(i,e){
varcanvas=e;
vardataURL=canvas.toDataURL();
varb64=dataURL.substring(22);
console.log(b64);
console.log("**********************************************");
});
}
$(document).ready(function(){
//查找所有图片,动态创建画布
newCanvas();
//标记按钮
$("#mark").click(function(){
flag=true;
});
//圆圈按钮
$("#circle").click(function(){
flag1=true;
});
//清空按钮
$("#clear").click(function(){
//动态清空所有画布
clearCanvas();
});
//字体按钮
$("#writeFont").click(function(){
flag2=true;
});
//获取base64压缩数据
$("#getData").click(function(){
//动态获取所有画布的Base64压缩数据
Canvas();
});
//给页面所有画布设置点击事件
$(document).find("canvas").each(function(i){
$(this).bind("click",mouseMove);
});
//画布绘制标记
functionmouseMove(event){
varid=$(this).attr("id");
varc=document.getElementById(id);
varctx=c.getContext("2d");
//如果激活了直线标记按钮
if(flag){
//获取点击位置的相对坐标
varcoord=getXAndY(event,$(this));
varx=coord.x;
vary=coord.y;
if(x1==-10000&&y1==-10000){
//还未进行选择开始位置的坐标
x1=x;
y1=y;
}elseif(x2==-10000&&y2==-10000){
//还未进行选择结束位置的坐标
x2=x;
y2=y;
//绘制标记
//必须开启beginPath，否则可能会出现之前绘制过的线条
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.stroke();
//必须释放closePath
ctx.closePath();
//初始化
flag=false;
x1=-10000;
y1=-10000;
x2=-10000;
y2=-10000;
}else{
alert("浏览器异常，请按F5刷新页面重新标记！");
}
}else{
//alert("请先点击标记按钮再进行标记！");
}
//如果激活了圆圈按钮
if(flag1){
//获取点击位置的相对坐标
varcoord=getXAndY(event,$(this));
varx=coord.x;
vary=coord.y;
//绘制圆圈标记
ctx.beginPath();
ctx.arc(x,y,10,0,2*Math.PI);
ctx.stroke();
//初始化
flag1=false;
}
//如果激活了文字标记按钮
if(flag2){
//获取点击位置的相对坐标
varcoord=getXAndY(event,$(this));
varx=coord.x;
vary=coord.y;
varuser=window.prompt("请输入标记内容","");
//确定
if(user){
//绘制文字标记
ctx.font="16pxArial";
ctx.fillText(user,x,y);
}
//初始化
flag2=false;
}
}
//获取鼠标点击画布区域中的相对位置坐标
functiongetXAndY(event,clickDom){
//鼠标点击的绝对位置
Ev=event||window.event;
varmousePos=mouseCoords(event);
varx=mousePos.x;
vary=mousePos.y;
//alert("鼠标点击的绝对位置坐标："+x+","+y);
//获取canvas画布在body中的绝对位置
varx1=$(clickDom).offset().left;
vary1=$(clickDom).offset().top;
//alert("画布在body中的绝对位置坐标："+x1+","+y1);
//鼠标点击位置的相对于canvas画布的坐标
varx2=x-x1;
vary2=y-y1;
//alert("画布在body中的相对位置坐标："+x2+","+y2);
return{x:x2,y:y2};
}
//获取鼠标点击画布区域中的绝对位置坐标
functionmouseCoords(event){
if(event.pageX||event.pageY){
return{x:event.pageX,y:event.pageY};
}
return{
x:event.clientX+document.body.scrollLeft-document.body.clientLeft,
y:event.clientY+document.body.scrollTop-document.body.clientTop
};
}
});
</script></head><bodyid="body">
<divid="myCan">
<p>Imagetouse:</p>
<imgid="scream"src="test.jpg"alt="TheScream"width="200"height="200"/>
<imgid="scream1"src="test.jpg"alt="TheScream"width="200"height="200"/>
<p>Canvas:</p>
</div>
<inputid="mark"type="button"value="标记"/>
<inputid="circle"type="button"value="圈记"/>
<inputid="writeFont"type="button"value="文字"/>
<inputid="clear"type="button"value="清空"/>
<inputid="getData"type="button"value="图片生成Base64压缩数据"/></body></html>