2

Como reduzir o tamanho de uma imagem com JavaScript? Estou usando canvas para redimensionar, reduzir o tamanho na proporção e convertendo para jpeg.

O problema ocorre quando tento salvar a imagem, já que não consigo baixá-la convertida para jpeg.

Segue o código no JsFidle.

http://jsfiddle.net/x4gvgnwn/3/

Obs: o console.log() retorna que o tipo é jpeg, mas ao clicar com o direito do mouse tentar salvá-la, está em png.

Alguma sugestão de como resolver o problema?

6
  • Acho que esqueceste de juntar o jsFiddle...
    – Sergio
    Commented 12/02/2015 às 16:04
  • nusss q mancada...kk Commented 12/02/2015 às 16:21
  • Pra mim está em jpeg.
    – Lollipop
    Commented 12/02/2015 às 16:24
  • acabo de ocultar a imagem e deixei apenas o canvas, assim sendo é só tentar salvar pra verem que salva em png jsfiddle.net/x4gvgnwn/3 Commented 12/02/2015 às 16:25
  • É isto que procuras -> jsfiddle.net/x4gvgnwn/4 ?
    – Sergio
    Commented 12/02/2015 às 16:43

2 Respostas 2

0

De acordo com esta documentação há uma especie de "falha", ou melhor dizendo, este é o recurso do canvas na obtenção do jpeg:

http://zapone.org/blaine/2015/01/03/save-html-canvas-drawing-as-jpg-error/

Já existe um tópico a respeito disto:

https://stackoverflow.com/questions/17397319/save-canvas-as-jpg-to-desktop?answertab=active#tab-top

De acordo com essas duas pesquisas a sua solução seria criar uma especie de link ou forçar download ao clicar na imagem. Isto é muito simples. Um exemplo com link:

/**
 *    Ken Fyrstenberg Nilsen
 *    Abidas Software
 */
var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d');

/**
 * Functions for demo
 */
function doCanvas() {

    //some background
    var s = canvas.width / 5;
    var i = 0;
    var r = Math.random;


    var txt = 'Normal text';
    var itxt = 'Inversed text';

    ctx.fillStyle = '#fff';
    
    ctx.textBaseline = 'top';
    ctx.font = '80px impact'
    ctx.fillText(txt, 30, 20);

    ctx.fillInversedText(itxt, 30, 100);
    
    requestAnimationFrame(doCanvas);
}

/**
 * Canvas extension: fillInversedText
 * By Ken Fyrstenberg Nilsen 2013. Beta 1.
*/
CanvasRenderingContext2D.prototype.fillInversedText = function (txt, x, y) {

    //measure
    var tw = this.measureText(txt).width;
    var th = parseInt(ctx.font, '10');
    th = (th === 0) ? 16 : th;

    //setupp off-screen canvas
    var co = document.createElement('canvas');
    co.width = tw;
    co.height = th;

    //fill text
    var octx = co.getContext('2d');
    octx.font = this.font;
    octx.textBaseline = 'top';
    octx.fillText(txt, 0, 0);

    //get pixel buffers
    var ddata = this.getImageData(x, y, tw, th);
    var sdata = octx.getImageData(0, 0, tw, th);

    var dd = ddata.data;
    var ds = sdata.data;
    var len = ds.length;
    
    //invert
    for (var i = 0; i < len; i += 4) {
        if (ds[i + 3] > 0) {
            dd[i] = (255 - dd[i]);
            dd[i + 1] = (255 - dd[i + 1]);
            dd[i + 2] = (255 - dd[i + 2]);
        }
    }

    //result at x/y
    this.putImageData(ddata, x, y);
}

/**
 * Init generals
 */
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);

function download() {
    var dt = canvas.toDataURL();
    this.href = dt; //this may not work in the future..
}
document.getElementById('download').addEventListener('click', download, false);

/**
 * Monkey patches
 */
window.requestAnimationFrame = (function () {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function (callback) {
        window.setTimeout(callback, 1000 / 60);
    };
})();

window.cancelAnimationFrame = (function () {
    return window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || function (timPtr) {
        window.clearTimeout(timPtr);
    };
})();

/**
 * START
 */
doCanvas();
	body {
	    background-color:#555657;
	    padding:0;
	    margin:0;
	    overflow:hidden;
	    font-family:sans-serif;
	    -webkit-user-select: none;
	    -khtml-user-select: none;
	    -moz-user-select: none;
	    -ms-user-select: none;
	    user-select: none;
	}
	canvas {
	    border:1px solid #000;
	    float:left;
	    clear:both;
	}
	#download {
	    clear:both;
	    float:left;
	    cursor:pointer;
	    color:#ccc;
	    padding:3px;
	}
	#download:hover {
	    color:#fff;
	}
	/*
	div, input {
	    font-size:16px;
	    font-family:sans-serif;
	    border:1px solid #000;
	    border-radius: 5px;
	    float:left;
	    padding:5px;
	    width:50px;
	    margin:1px 1px;
	    background-color:#bbb;
	}
	input[type='text'] {
	    font-size:16px;
	    font-weight:bold;
	    width:70px;
	    text-align:center;
	    background-color:#fff;
	    padding-bottom:4px;
	}
	input[type='button'] {
	    font-size:16px;
	    font-weight:bold;
	    width:110px;
	    text-align:center;
	    background-color:#333;
	    color:#eee;
	    padding-bottom:4px;
	}
	input[type='button']:hover {
	    background-color:#fff463;
	    color:#000;
	}
	input[type='range'] {
	    width:100px;
	    margin:0 0 0 10px;
	}
*/
	
<canvas width="500" height="210" id="canvas">Sorry, no canvas available</canvas>
<a id="download" download="AbdiasCanvasDemo.png">Download as image</a>

2
  • cara, no seu código também não salva em jpeg... Commented 12/02/2015 às 16:49
  • @DouglasLopes, editei a resposta.
    – Lollipop
    Commented 12/02/2015 às 17:27
0

Existe um erro no seu código, como você pega a imagem que esta no canvas sem antes desenha-la?

var img2 = new Image();
img2.src = canvas.toDataURL("image/jpeg", 1.0);
//Exibe (desenha) a imagem na tela
ctx.drawImage(img, 0, 0, width, height);

O certo seria:

//Exibe (desenha) a imagem na tela
ctx.drawImage(img, 0, 0, width, height);
var img2 = new Image();
img2.src = canvas.toDataURL("image/jpeg", 1.0);

Com isso você já poderia obter o resultado esperado porem você quer mesmo mostrar no canvas sua imagem jpg? se sim, o canvas iria transforma-la em png novamente então o correto seria mostrar ela no dom:

document.body.appendChild(img2);

Isto faria com que se o usuario quisesse salvar a imagem, ela já estaria em jpg.

Teste aqui seu código editado:

var img = document.getElementById("preview");

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

var MAX_WIDTH = 800;
var MAX_HEIGHT = 800;

var width = img.width;
var height = img.height;

if (width > height) {
  if (width > MAX_WIDTH) {
    height *= MAX_WIDTH / width;
    width = MAX_WIDTH;
  }
} else {
  if (height > MAX_HEIGHT) {
    width *= MAX_HEIGHT / height;
    height = MAX_HEIGHT;
  }
}

canvas.width = width;
canvas.height = height;

//Exibe (desenha) a imagem na tela
ctx.drawImage(img, 0, 0, width, height);
var img2 = new Image();
img2.src = canvas.toDataURL("image/jpeg", 1.0);

document.body.appendChild(img2);

console.log(img2);
<img crossOrigin="anonymous" id="preview" style="display:none;" src="https://lh3.googleusercontent.com/-zXZsjsGeYX0/UiuAEl31SDI/AAAAAAAABYI/g77Sb8-lzbY/w1109-h633-no/15-02-2013_internet.jpg">
<canvas id="canvas" style="background-size:contain;display:none;"></canvas>

2
  • Vlw cara, mas o new image(), não pega a imagem e sim gera uma Tag <img>, por isso não importa a ordem, mas pelo que entendi, o canvas trabalha exclusivamente com png não é? De qualquer jeito resolveu, eu até sabia que era possível usar o append, mas queria usar apenas o canvas mesmo, abrç! Commented 12/02/2015 às 17:35
  • De nada, mas oque estava tentando falar era que o todataurl deve estar em baixo de drawimage pois antes estava retornando uma imagem preta(transparente no png igual ao preto do jpg) Commented 12/02/2015 às 17:51

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .