Question

我使用以下代码转换html＆gt; canvas＆gt;图片

  image.src = canvas.toDataURL('jpeg',1.0);
       $('.imagediv').html(image);
////This is just a snippet

我的问题是我想要定义其他图像属性width，height，alt，class和一个整洁的文件名image.jpg。如您所见，图像需要在转换时显示在浏览器中。

Answer 1

您想要做的事情非常简单（答案在您添加的示例代码中）：只需按照与图像源相同的方式定义不同的属性：

.src：指定图片来源。
.width：指定元素的宽度。
.height：指定元素的高度。
.alt：指定替代文字。
.title：指定标题。
.className：指定班级。
.id：指定元素ID。
等...

或者如果您愿意，可以使用setAttribute()方法代替：

image.setAttribute("alt", "I am the alternative text");

这是一个简单的演示，为使用canvas生成的图像设置不同的属性：

// get the canvas for manipulation
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext('2d');

// draw a square this is just a test
context.moveTo(5,5);
context.lineTo(395,5);
context.lineTo(395,195);
context.lineTo(5,195);
context.lineTo(5,5);
context.fillStyle = "#FF0000";
context.fillRect(5,5,390,190);
context.stroke();

// create the image and set the attributes
var image = new Image();
image.src = canvas.toDataURL('jpeg', 1.0);
image.alt = "A simple red rectangle with black border";
image.title = "Red rectangle with black border";
image.width = 400;
image.height = 200;
image.className = "myClass";

// place the image inside the div
document.getElementById('imagediv').appendChild( image );

.myClass {
    box-shadow:2px 2px 8px red;
}

<canvas id="myCanvas" width="400" height="200" style="display:none;"></canvas>
<div id="imagediv"></div>

唯一更复杂的是“整洁的文件名”。 toDataURL方法返回一个包含图像表示的数据URI（在base64中），这不是一个好看的名字。如果要显示一个好名称，则需要保存该文件，然后指向该文件。

如果您想要的是一个整洁的文件名，因为用户可以使用链接下载图片，您可以做的是在锚点中设置download属性并在那里指定名称。

这样的事情：

// get the canvas for manipulation
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext('2d');

// draw a square this is just a test
context.moveTo(5,5);
context.lineTo(395,5);
context.lineTo(395,195);
context.lineTo(5,195);
context.lineTo(5,5);
context.fillStyle = "#FF0000";
context.fillRect(5,5,390,190);
context.stroke();

// set the image as the href of the anchor
document.getElementById("myA").href = canvas.toDataURL('jpeg', 1.0);

<canvas id="myCanvas" width="400" height="200" style="display:none;"></canvas>
<a href="" id="myA" download="Red rectangle with border.jpg">Download picture</a>

定义canvas2image生成的图像的属性，例如alt标签

1 个答案: