Para informações gerais sobre o uso do <canvas> ver a página do tópico canvas.
Código usável do conteúdo da Web
Recebendo o número de pixels de uma certa cor em um canvas
A função a seguir retornará o número de pixels em um canvas que a cor RGB de r, g e b. Isso pode ser muito útil para comparar, por exemplo se um usuário pintou sobre uma outra área como explicado nessa publicação do blog.
function getpixelamount(canvas, r, g, b) {
var cx = canvas.getContext('2d');
var pixels = cx.getImageData(0, 0, canvas.width, canvas.height);
var all = pixels.data.length;
var amount = 0;
for (i = 0; i < all; i += 4) {
if (pixels.data[i] === r &&
pixels.data[i + 1] === g &&
pixels.data[i + 2] === b) {
amount++;
}
}
return amount;
};
Recebendo a cor de um pixel em um canvas
Esse fragmento a seguir retorna um objeto com os valores RGBA do pixel na posição x e y do canvas. Isso pode ser usado para determinar se o cursor do mouse está dentro de uma certa forma ou não.
function getpixelcolour(canvas, x, y) {
var cx = canvas.getContext('2d');
var pixel = cx.getImageData(x, y, 1, 1);
return {
r: pixel.data[0],
g: pixel.data[1],
b: pixel.data[2],
a: pixel.data[3]
};
}
Encadeamento de métodos
Essa classe prove um estilo JQuery de acesso encadeado aos métodos e propriedades do contexto 2D.
function Canvas2DContext(canvas) {
if (typeof canvas === 'string') {
canvas = document.getElementById(canvas);
}
if (!(this instanceof Canvas2DContext)) {
return new Canvas2DContext(canvas);
}
this.context = this.ctx = canvas.getContext('2d');
if (!Canvas2DContext.prototype.arc) {
Canvas2DContext.setup.call(this, this.ctx);
}
}
Canvas2DContext.setup = function () {
var methods = ['arc','arcTo','beginPath','bezierCurveTo','clearRect','clip',
'closePath','drawImage','fill','fillRect','fillText','lineTo','moveTo',
'quadraticCurveTo','rect','restore','rotate','save','scale','setTransform',
'stroke','strokeRect','strokeText','transform','translate'];
var getterMethods = ['createPattern','drawFocusRing','isPointInPath','measureText', // drawFocusRing not currently supported
// The following might instead be wrapped to be able to chain their child objects
'createImageData','createLinearGradient',
'createRadialGradient', 'getImageData','putImageData'
];
var props = ['canvas','fillStyle','font','globalAlpha','globalCompositeOperation',
'lineCap','lineJoin','lineWidth','miterLimit','shadowOffsetX','shadowOffsetY',
'shadowBlur','shadowColor','strokeStyle','textAlign','textBaseline'];
for (let m of methods) {
let method = m;
Canvas2DContext.prototype[method] = function () {
this.ctx[method].apply(this.ctx, arguments);
return this;
};
}
for (let m of getterMethods) {
let method = m;
Canvas2DContext.prototype[method] = function () {
return this.ctx[method].apply(this.ctx, arguments);
};
}
for (let p of props) {
let prop = p;
Canvas2DContext.prototype[prop] = function (value) {
if (value === undefined)
return this.ctx[prop];
this.ctx[prop] = value;
return this;
};
}
};
var canvas = document.getElementById('canvas');
// Use context to get access to underlying context
var ctx = Canvas2DContext(canvas)
.strokeStyle("rgb(30,110,210)")
.transform(10, 3, 4, 5, 1, 0)
.strokeRect(2, 10, 15, 20)
.context;
// Use property name as a function (but without arguments) to get the value
var strokeStyle = Canvas2DContext(canvas)
.strokeStyle("rgb(50,110,210)")
.strokeStyle();
Código usável apenas para código previlegiado
Esse fragmento só é útl para códigos previlegiados, como extensões ou aplicativos previlegiados.
Salvando uma imagem do canvas à um arquivo
A função a seguir aceita um objeto canvas e uma string de destinação do caminho do arquivo. O canvas é convertido para um arquivo PNG e, é salvo na localização especificada. A função retorna uma promessa que resolve quando o arquivo foi completamente salvo.
function saveCanvas(canvas, path, type, options) {
return Task.spawn(function *() {
var reader = new FileReader;
var blob = yield new Promise(accept => canvas.toBlob(accept, type, options));
reader.readAsArrayBuffer(blob);
yield new Promise(accept => { reader.onloadend = accept });
return yield OS.File.writeAtomic(path, new Uint8Array(reader.result),
{ tmpPath: path + '.tmp' });
});
}
Carregando uma página remota em um elemento canvas
A classe a seguir primeiro cria um elemento iframe oculto e anexa um ouvinte ao evento carregar frame. Uma vez que a página remota foi carregada, o método remotePageLoaded é ativado. Esse método pega uma referência da janela do iframe e desenha essa janela no objeto canvas.
Note que isso só funciona se você esta rodando a página no chrome. Se você tentar rodar o código como uma página da web simples, você receberá um 'Erro de segurança" código: erro "1000'.
RemoteCanvas = function() {
this.url = "https://developer.mozilla.org";
};
RemoteCanvas.CANVAS_WIDTH = 300;
RemoteCanvas.CANVAS_HEIGHT = 300;
RemoteCanvas.prototype.load = function() {
var windowWidth = window.innerWidth - 25;
var iframe;
iframe = document.createElement("iframe");
iframe.id = "test-iframe";
iframe.height = "10px";
iframe.width = windowWidth + "px";
iframe.style.visibility = "hidden";
iframe.src = this.url;
// Here is where the magic happens... add a listener to the
// frame's onload event
iframe.addEventListener("load", this.remotePageLoaded, true);
//append to the end of the page
window.document.body.appendChild(iframe);
return;
};
RemoteCanvas.prototype.remotePageLoaded = function() {
// Look back up the iframe by id
var ldrFrame = document.getElementById("test-iframe");
// Get a reference to the window object you need for the canvas
// drawWindow method
var remoteWindow = ldrFrame.contentWindow;
//Draw canvas
var canvas = document.createElement("canvas");
canvas.style.width = RemoteCanvas.CANVAS_WIDTH + "px";
canvas.style.height = RemoteCanvas.CANVAS_HEIGHT + "px";
canvas.width = RemoteCanvas.CANVAS_WIDTH;
canvas.height = RemoteCanvas.CANVAS_HEIGHT;
var windowWidth = window.innerWidth - 25;
var windowHeight = window.innerHeight;
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0,
RemoteCanvas.CANVAS_WIDTH,
RemoteCanvas.CANVAS_HEIGHT);
ctx.save();
ctx.scale(RemoteCanvas.CANVAS_WIDTH / windowWidth,
RemoteCanvas.CANVAS_HEIGHT / windowHeight);
ctx.drawWindow(remoteWindow,
0, 0,
windowWidth, windowHeight,
"rgb(255,255,255)");
ctx.restore();
};
Emprego:
var remoteCanvas = new RemoteCanvas(); remoteCanvas.load();
Converter arquivos de imagem para strings base64
O código a seguir recebe uma imagem remota e converte seu conteúdo para Dados do esquema URI.
var canvas = document.createElement("canvas");
var ctxt = canvas.getContext("2d");
function loadImageFile (url, callback) {
var image = new Image();
image.src = url;
return new Promise((accept, reject) => {
image.onload = accept;
image.onerror = reject;
}).then(accept => {
canvas.width = this.width;
canvas.height = this.height;
ctxt.clearRect(0, 0, this.width, this.height);
ctxt.drawImage(this, 0, 0);
accept(canvas.toDataURL());
});
}
Emprego:
loadImageFile("myimage.jpg").then(string64 => { alert(string64); });
Se você quer receber ao invés do conteúdo base64 de um arquivo local usando o arquivo elemento {{ HTMLElement("input") }}, você deve usar o objeto FileReader.