canvas 2D API的1.2 toDataURL()方法

Posted 2023-03-14

参考技术A

此函数，返回一张使用canvas绘制的图片，返回值符合data:URL格式，格式如下：
url = canvas . toDataURL( [ type, ... ])
规范规定，在未指定返回图片类型时，返回的图片格式必须为PNG格式，如果canvas没有任何像素，则返回值为：“data:,”，这是最短的data:URL，在text/plain资源中表现为空字符串。type的可以在image/png，image/jpeg,image/svg+xml等 MIME类型中选择。如果是image/jpeg，可以有第二个参数，如果第二个参数的值在0-1之间，则表示JPEG的质量等级，否则使用浏览器内置默认质量等级。
下面的代码可以从ID为codeex的canvas中取得绘制内容，并作为DataURL传递给img元素，并显示。 varcanvas = document.getElementById('codeex');
varurl = canvas.toDataURL();
//id为myimg的图片元素
myimg.src = url; 1 二维绘图上下文 当使用一个canvas元素的getContext(“2d”)方法时，返回的是CanvasRenderingContext2D对象，其内部表现为笛卡尔平面坐标，并且左上角坐标为(0,0)，在本平面中往右则x坐标增加和往下方y坐标增加。每一个canvas元素仅有一个上下文对象。其接口如下： interfaceCanvasRenderingContext2D
// back-reference to the canvas
readonly attribute htmlCanvasElement canvas;
// state
void restore(); // pop state stack and restore state
void save(); // push state on state stack
// transformations (default transform is the identity matrix)
void rotate(in float angle);
void scale(in float x, in float y);
void setTransform(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);
void transform(in float m11, in float m12, in float m21, in float m22, in float dx, in float dy);
void translate(in float x, in float y);
// compositing
attribute float globalAlpha; // (default 1.0)
attribute DOMString globalCompositeOperation; // (default source-over)
// colors and styles
attribute any fillStyle; // (default black)
attribute any strokeStyle; // (default black)
CanvasGradient createLinearGradient(in float x0, in float y0, in float x1, in float y1);
CanvasGradient createRadialGradient(in float x0, in float y0, in float r0, in float x1, in float y1, in float r1);
CanvasPattern createPattern(in HTMLImageElement image, in DOMString repetition);
CanvasPattern createPattern(in HTMLCanvasElement image, in DOMString repetition);
CanvasPattern createPattern(in HTMLVideoElement image, in DOMString repetition);
// line styles
attribute DOMString lineCap; // butt, round, square (default butt)
attribute DOMString lineJoin; // miter, round, bevel (default miter)
attribute float lineWidth; // (default 1)
attribute float miterLimit; // (default 10)
// shadows
attribute float shadowBlur; // (default 0)
attribute DOMString shadowColor; // (default transparent black)
attribute float shadowOffsetX; // (default 0)
attribute float shadowOffsetY; // (default 0)
// rects
void clearRect(in float x, in float y, in float w, in float h);
void fillRect(in float x, in float y, in float w, in float h);
void strokeRect(in float x, in float y, in float w, in float h);
// Complex shapes (paths) API
void arc(in float x, in float y, in float radius, in float startAngle, in float endAngle, in boolean anticlockwise);
void arcTo(in float x1, in float y1, in float x2, in float y2, in float radius);
void beginPath();
void bezierCurveTo(in float cp1x, in float cp1y, in float cp2x, in float cp2y, in float x, in float y);
void clip();
void closePath();
void fill();
void lineTo(in float x, in float y);
void moveTo(in float x, in float y);
void quadraticCurveTo(in float cpx, in float cpy, in float x, in float y);
void rect(in float x, in float y, in float w, in float h);
void stroke();
boolean isPointInPath(in float x, in float y);
// text
attribute DOMString font; // (default 10px sans-serif)
attribute DOMString textAlign; // start, end, left, right, center (default: start)
attribute DOMString textBaseline; // top, hanging, middle, alphabetic, ideographic, bottom (default: alphabetic)
void fillText(in DOMString text, in float x, in float y, optional in float maxWidth);
TextMetrics measureText(in DOMString text);
void strokeText(in DOMString text, in float x, in float y, optional in float maxWidth);
// drawing images
void drawImage(in HTMLImageElement image, in float dx, in float dy, optional in float dw, in float dh);
void drawImage(in HTMLImageElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);
void drawImage(in HTMLCanvasElement image, in float dx, in float dy, optional in float dw, in float dh);
void drawImage(in HTMLCanvasElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);
void drawImage(in HTMLVideoElement image, in float dx, in float dy, optional in float dw, in float dh);
void drawImage(in HTMLVideoElement image, in float sx, in float sy, in float sw, in float sh, in float dx, in float dy, in float dw, in float dh);
// pixel manipulation
ImageData createImageData(in float sw, in float sh);
ImageData createImageData(in ImageData imagedata);
ImageData getImageData(in float sx, in float sy, in float sw, in float sh);
void putImageData(in ImageData imagedata, in float dx, in float dy, optional in float dirtyX, in float dirtyY, in float dirtyWidth, in float dirtyHeight);
;
interfaceCanvasGradient
// opaque object
void addColorStop(in float offset, in DOMString color);
;
interfaceCanvasPattern
// opaque object
;
interfaceTextMetrics
readonly attribute float width;
;
interfaceImageData
readonly attribute CanvasPixelArray data;
readonly attribute unsigned long height;
readonly attribute unsigned long width;
;
interfaceCanvasPixelArray
readonly attribute unsigned long length;
getter octet(in unsigned long index);
setter void(in unsigned long index, in octet value);
;