您好,我有此画布和图像,但是我需要制作它,以便画布将链接到其尺寸的图像包裹起来。 现在,我已经放置了测试图像,并固定了尺寸。 我希望在放置画布并对其进行成像时将其包装成图像的100%宽度100%高度。

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var boxWidth=100;
var boxHeight=100;
var boxRows=Math.ceil(865/boxHeight);
var boxCols=Math.ceil(1152/boxWidth);
var boxes=new Array(boxRows*boxCols);
for(var i=0;i<boxes.length;i++){boxes[i]=false;}

var img=new Image();
img.onload=start;
img.crossOrigin='anonymous';
img.src="http://i.imgur.com/RrHayx8.png?1";
function start(){

ctx.drawImage(img,0,0);

var d=ctx.getImageData(0,0,cw,ch).data;

for(var i=0;i<d.length;i+=4){
if(d[i+3]>200){
  var px=parseInt(i/4);
  var pixelY=parseInt(px/cw);
  var pixelX=px-pixelY*cw;
  var boxX=parseInt(pixelX/boxWidth);
  var boxY=parseInt(pixelY/boxHeight); 
  boxes[boxY*boxCols+boxX]=true;
 }
  }

 ctx.globalAlpha=0.25;
 ctx.fillStyle='red';

 for(var i=0;i<boxes.length;i++){
 var y=parseInt(i/boxCols);
 var x=i-y*boxCols;
 if(boxes[i]==true){
  ctx.fillRect(x*boxWidth,y*boxHeight,boxWidth,boxHeight);        
 }
 }

ctx.globalAlpha=1.00;
ctx.fillStyle='black';

}

https://jsfiddle.net/kdichev/Lmqdrkp2/

#1楼 票数:2

如果您始终将图像加载到位置(0,0) ,则可以通过添加将画布的大小设置为加载的图像的大小

  canvas.width = img.width;
  canvas.height = img.height;
  ctx=canvas.getContext("2d");

start()函数的最开始。 前两行调整画布的大小。 调整大小后,必须更新上下文以使其正常工作。

  ask by user1780729 translate from so

未解决问题?本站智能推荐:

1回复

用图像尺寸设置画布

我正在尝试将画布设置为图片背景。 我想使图像可变,但这是一个不同的讨论。 这是我的代码。 当页面加载时,我会收到具有正确像素高度和宽度的警报,但是未显示画布。 任何帮助表示赞赏。
1回复

如何绘制图像或裁剪图像以适合控件尺寸

我有2个JavaScript页面。 第一个具有图像控件,第二个具有将回调作为图像返回的函数。 第1页: 第2页: 问题: 我在第1页中的控件(.mapItem)的高度和宽度为75.2px(固定)来自回调的图像但是每次都有不同的大小,例如一天可以是200px * 300px,而一
1回复

任何人都可以告诉我如何使用画布将图像调整为特定尺寸和曲线

我有一个应用程序,用户将上传一个大图像,我的应用程序中还有另一个小图像。 我想使用画布调整大小和弯曲上传的图像。 我正在使用以下代码。 它正在弯曲图像,但无法调整图像大小。
1回复

用画布绘图填充图像

代码说明:我正在使用画布使用某些Java脚本进行绘制..我希望用户在画布区域中绘制一些东西,然后保存它或清洁画布区域.. 这是我到目前为止所做的..这是代码/; 但它需要浏览器才能工作https://jsfiddle.net/RababAlkhalifa/k0y1yzh8/ Java脚
2回复

将图像填充在画布中

我有一个base64图像字符串,我创建了一个画布,并将b​​ase64与图像放在一起,并将画布高度设置为481,宽度设置为650,当我尝试以html显示图像时,图像即将到来,但未完全填充画布, 任何人都可以告诉我一些解决方法,以将图像填充到整个画布中,而不管图片的质量如何。 我的代码如下
1回复

从画布创建图像

我一直在网上浏览,对我的特定任务没有任何答案。 我要完成的工作是创建一个画布,其中包含图像和文本字段。 标语制作者。 尽管我设法从具有背景的画布上创建图像,但是保存的文件没有内容,只有300x300的带有alpha的字段。 我研究过mRNA的值,它始终具有相同的值,这意味着它正在保存一些
1回复

用Javascript将图像绘制到画布上

我希望使用单独的Javascript文件将图像绘制到HTML页面的画布上。 到目前为止,我拥有的HTML很好,我的问题似乎出在脚本之内。 这是我目前拥有的: 谁能告诉我我做错了什么或忘记了什么?
1回复

如何在画布上放置图像?

我已经使用z-index将图像置于画布的前面,但是如何垂直和水平居中图像呢? 上面的(我通常会做的)似乎不起作用。 这是GitHub链接: https : //github.com/Meeshbhoombah/meeshbhoombah.github.io和网站: http : //th