Javascript projeto parecido com editor de imagens

[ancosta1995]

bem pessoal, sou novo aqui no forum e to querendo tirar uma duvida, fui solicitado para um serviço, e o serviço é o desenvolvimento de uma pagina em que os clientes que entrarem nessa pagina, vão poder montar uma cozinha, ou banheiro, arrastando as imagens dos moveis para uma div intitulada editor, e depois que a pessoa montar da forma que ela achar melhor, vai ter um botão download, onde ela poderar baixar a imagem que ela fez na div, eu ja pesquisei previamente, e vou usar o jquery para criar os arrastaveis, e vou usar uma biblioteca html2canvas, para tirar a print da div depois de editada, vocês acham que apenas com isso seria possivel? esse é um caminho certo para para fazer algo do tipo? so no cliente-side isso seria possivel? desde ja agradeço a todos que responderem.

[ancosta1995]

consegui essa função, que cria uma imagem de uma div

var convertMeToImg = $('#editor')[0];
html2canvas(convertMeToImg).then(function(canvas) {
	$('#resultado').append(canvas);
});

mas aqui ela só joga a imagem em uma div #resultado, teria como ao invés de jogar na div, ja salvar a imagem diretamente?

[DiF]

@ancosta1995 Veja esse exemplo de salvar a imagem com um clique 

 

https://jsfiddle.net/dife/2umoywsq/

 

Aqui outros exemplos: https://ourcodeworld.com/articles/read/415/how-to-create-a-screenshot-of-your-website-with-javascript-using-html2canvas

[ancosta1995]

valeu mano, cosegui resolver o meu problema, se alguem tiver com o mesmo problema, só deixar uma mensagem aqui que eu mostro como fiz, desde ja agradeço a ajuda.

[DiF]

@ancosta1995 Seria interessante você postar essa solução encontrada  né? Não precisa alguém pedir. Posta aqui e deixe registrado. Assim você vai ajudar muito mais!!! 

 

[ancosta1995]

codigo que salva a imagem, encontrei em um forum gringo, é tipo uma class:

ImageSaver = {
  // function to force-download from a data uri as a filename
  // nb the download="filename" attribute isn't yet supported by safari
  download_data_uri: function(dataURI, fileName) {
    var tempUrl = ImageSaver.make_url_from_data(dataURI);
    var link = $('<a href="' + tempUrl + '" id="download" download="' + fileName + '" target="_blank"> </a>');
    $("body").append(link);
    $("#download").get(0).click();
  },

  // function to generate a temporary browser index url for a datauri
  // if a data-uri is larger than 2mb, chrome's address bar can't handle it.
  // fortunately, you can blob it and then use a temporary blob url
  make_url_from_data: function(dataURI) {
    var blob = ImageSaver.make_blob(dataURI);
    var tempUrl = URL.createObjectURL(blob);
    return tempUrl;
  },

  // function to convert a datauri to a blob
  // Blobs are temporary data structures that can hold binary data, and make that data accessible through a short url. They can probably do other things too; I have no idea.
  make_blob: function(dataURI) {
    // convert base64 to raw binary data held in a string
    // doesn't handle URLEncoded DataURIs
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
      byteString = atob(dataURI.split(',')[1]);
    else
      byteString = unescape(dataURI.split(',')[1]);
    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to an ArrayBuffer
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i);
    };

    // write the ArrayBuffer to a blob, and you're done
    return new Blob([ab], {
      type: mimeString
    });
  }
}

 

no meu caso ela foi usada assim:

$("#baixar").click(function(){//função que salva a imagem
		var convertMeToImg = $('#editor')[0];
		html2canvas(convertMeToImg).then(function(canvas) {
			superLongURI = canvas.toDataURL("image/png");
			ImageSaver.download_data_uri(superLongURI, "projeto.png");
			//shortURI = ImageSaver.make_url_from_data(dataURI);
		});
	});

 o id #baixar é o botao de download, o id #editor, é a div que eu queria tirar a print, e esse primeiro codigo, serve pra salvar a imagem, ao invés de so jogar a imagem em uma div, eu salvo ela em png