O css de transformação não está funcionando.
img class = "imageobject" id = "3" src = "images / large / food.png" style = "- webkit-transform: matrix (0,5, 0,42, -0,42, 0,5, 120, 52);"
Eu preciso muito desse recurso. Tentei editar seu código implementando a matriz, mas falhou.
Eu trabalhei esta função
function renderImage (ctx, elemento, imagem, limites, bordas, matx) {}
Aqui eu passei mais um parâmetro "matx". É o valor da matriz dessa imagem. Mas não é possível atribuir essa matriz ao "ctx".
O mesmo problema está acontecendo para o campo de texto também.
Por favor me ajude.
As transformações ainda não são compatíveis.
Há uma solução alternativa - não é bonita, mas ainda assim (funciona para imagens png e jpg). Lógica básica: encontre imagens giradas, substitua sua localização e forneça funcionalidade PHP.
Etapa 1: inclua a função jQuery que fornece suporte para transformação CSS.
(function ($) {
$.fn.rotationDegrees = function () {
var matrix = this.css("-webkit-transform") ||
this.css("-moz-transform") ||
this.css("-ms-transform") ||
this.css("-o-transform") ||
this.css("transform");
if(typeof matrix === 'string' && matrix !== 'none') {
var values = matrix.split('(')[1].split(')')[0].split(',');
var a = values[0];
var b = values[1];
var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
} else { var angle = 0; }
return angle < 0 ? angle+360 : angle;
};
}(jQuery));
Etapa 2: substitua a localização das imagens giradas pelo URL do PHP (inclua antes da renderização do html2canvas).
$("img").each(function(){
rot = $(this).rotationDegrees();
if (rot != 0)
$(this).attr("src", "/rotateimg.php?rotate=" + rot + "&loc=" + $(this).attr("src"));
});
Etapa 3: crie rotateimg.php, que fornece a funcionalidade de rotação
<?php
$loc = $_GET['loc'];
$rot = -$_GET['rotate'];
$path = "/web/images/path"; // $_SERVER['DOCUMENT_ROOT'] ?
$source = NULL;
if (substr($loc, -3) == "png")
$source = imagecreatefrompng($path . $loc);
else if (substr($loc, -3) == "jpg") {
$source = imagecreatefromjpeg($path . $loc);
}
imagealphablending($source, false);
imagesavealpha($source, true);
$img = imagerotate($source, $rot, imageColorAllocateAlpha($source, 0, 0, 0, 127));
imagealphablending($img, false);
imagesavealpha($img, true);
imagepng($img);
?>
Espero que ajude. =)
Adicionei suporte para imagens giradas em 90, 180 ou 270 graus. https://github.com/mjaggard/html2canvas/tree/simple-rotation
Rotação sem imagem geralmente não é suportada e nem outras transformações (embora eu algumas traduções e rotações sejam suportadas por html2canvas de qualquer maneira porque permite que o navegador faça o trabalho).
Inscrevendo-se. Procurando uma melhor solução de rotação para imagens / html aqui também. Precisamos de -webkit-transform para trabalhar com "graus", mas não com essa coisa de matriz.
Obrigado
Saudações,
E quanto ao dimensionamento? Tenho um texto dimensionado que não é renderizado corretamente; os personagens ficam todos apertados. Alguém pode me indicar a direção certa para talvez implementar esse recurso de dimensionamento?
Eu preciso girar :(
A implementação da escala de transformação seria ótima. Acho que é um ponto muito importante, porque você pode aumentar a qualidade da fonte e da imagem. Se você renderizar, por exemplo, um texto e aplicar zoom com o navegador, a qualidade é muito ruim. Isso pode tornar seu plugin html2canvas útil também para editores de texto e assim por diante.
@niklasvh : Você planeja implementar esse recurso em um futuro próximo? Eu agradeceria e daria uma doação por isso.
Oi, esse recurso realmente sinto falta dessa excelente ferramenta, algum plano para esse recurso?
@mjaggard - há alguma chance de seu código de rotação de imagem ser integrado na versão recente da biblioteca?
Eu olhei seu código e parece ter uma estrutura muito diferente.
Obrigado!
Oi,
Você planeja adicionar esse recurso em breve?
Seria muito útil !!
Muito obrigado !
Oi,
A rotação já está (webkit-transform) funcionando nesta versão para
exemplo.
Adicione esta classe em qualquer div e verifique se já testei.
.rt {-ms-transform: rotate (7deg); / * IE 9 _ /
-webkit-transform: rotate (7deg); / _ Chrome, Safari, Opera * /
transformar: girar (7deg);}
Na quarta-feira, 7 de janeiro de 2015 às 19h02, dscarteland [email protected]
escreveu:
Oi,
Você planeja adicionar esse recurso em breve?
Seria muito útil !!Muito obrigado !
-
Responda a este e-mail diretamente ou visualize-o no GitHub
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -69021663
.
@liteelips para mim também, eu também preciso de rotação de texto :(
Alguém encontrou alguma solução para a captura de tela dos divs girados?
+1
Código de trabalho completo com rotação e transformação para todos os navegadores. Não é possível anexar o arquivo. Envie-me para coletar o arquivo [email protected]
Perfeito, obrigado!
Você já pensou em fazer uma solicitação de pull ou colocar JS Fiddle?
Oi ,
que ótimo !! posso pegar o arquivo, por favor, como a rotação e transformação
está trabalhando para você agora.
Na terça-feira, 29 de setembro de 2015 às 15:32, Arindam Mojumder [email protected]
escreveu:
Código de trabalho completo com rotação e transformação para todos os navegadores. Não posso
anexe o arquivo. Envie-me para coletar o arquivo ou visite este link.-
Responda a este e-mail diretamente ou visualize-o no GitHub
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -144011634
.
_Amar Singh_
_PHP / MySQL Developer_
_Facebook
https://www.facebook.com/pages/Kodework/741342762609839 // LinkedIn
https://www.linkedin.com/company/kodework_
_Email: _ amar. [email protected] [email protected]
_Mobile: * + 91 7040980700
* Departamento: * Desenvolvimento
* Suporte: _ [email protected]
_Endereço: _ E-4 Vicente Greens, Socoro,
Porvorim, Goa 403521.
_Website: _ www.kodework.com
Olá, também estou lutando para fazer as transformações (girar) funcionarem, especificamente no IE. A tela finalizada contém de fato um elemento girado, mas normalmente apenas metade do elemento é mostrado.
Este é o estilo do script:
$('#<id of element>').htmlToCanvas({
width: 1000, // dimension of your html page
height: 600, // dimension of your html page
complete: function(){
var image = this.htmlToCanvas.toBinrary(); // will return base64 image data
$('<img emelent>').attr("src",image); // use this as a src of any img element
}
});
arquivo htmlToCanvas.js
(função ($) {
var canvasCounter = 0;
var canvas, cnvs, ctx, elementArr, callback, _this;
$.fn.htmlToCanvas = function(options){
var defaults = {width: 1000, height: 600, complete: null};
callback = $.extend(defaults, options);
_this = this;
return this.each(function(){
createImage('#'+$(this)[0].id);
});
}
$.fn.htmlToCanvas.toBinrary = function() {
return cnvs.toDataURL("image/jpeg",1);
// return cnvs.toDataURL({
// format: 'png',
// left: 0,
// top: 0,
// width: 200,
// height: 150
// })
}
$.fn.htmlToCanvas.removeCanvas = function() {
canvas.remove();
}
function createImage(divobj)
{
////console.log(divobj);
if(canvas) canvas.remove();
canvas = $('<canvas id="canvas" width="' + callback.width + '" height="'+ callback.height +'" style="display: block;"></canvas>');
$('body').append(canvas);
cnvs = document.getElementById('canvas')
ctx = cnvs.getContext("2d");
ctx.fillStyle = $(divobj).css('background-color');
ctx.fillRect(0,0,callback.width, callback.height);
canvasCounter = 0;
elementArr = [];
$(divobj + " img").each(function(index){
elementArr.push({type: 'img', zindex: $(this).css('z-index'), imgobj: $(this)});
console.log($(this));
});
$(divobj + " div").each(function(index){
elementArr.push({type: 'txt', zindex: $(this).css('z-index'), imgobj: $(this)});
});
elementArr.sort(function (a, b) {
//var a_zindex = a && a.zindex || "",
//b_zindex = b && b.zindex || "";
//return a_zindex.localeCompare(b_zindex);
var dif = Number(a.zindex - b.zindex);
//alert('cal '+dif);
return (dif);
});
//--------- background images ----------
if($(divobj).css('background-image') != 'none'){
var background = new Image();
var back_source = $(divobj).css('background-image');
back_source = back_source.substring(4, back_source.length-1);
back_source = back_source.replace('"', '');
back_source = back_source.replace('"', '');
//background.src = back_source;
$.ajax({
type: 'POST',
url: 'data/imagedata.php',
data: {'imgurl': back_source},
success: function(_data){
//console.log(_data);
var imagedata = 'data:image/jpeg;base64,' + _data;
background.src = imagedata;
background.onload = function(){
for (var w = 0; w < canvas.attr('width'); w += background.width) {
for (var h = 0; h < canvas.attr('height'); h += background.height){
ctx.drawImage(background, w, h);
}
}
if(elementArr.length > 0){
htmlToCanvas(elementArr[canvasCounter].type, elementArr[canvasCounter].imgobj);
} else {
postCanvas();
}
}
},
error: function(xhr, textstatus){
////console.log(textstatus);
}
});
} else {
if(elementArr.length > 0){
htmlToCanvas(elementArr[canvasCounter].type, elementArr[canvasCounter].imgobj);
} else {
postCanvas();
}
}
}
function htmlToCanvas(type, obj){
if(type == 'img'){
var canvas_img = new Image();
canvas_img.crossOrigin = "*"; // This enables CORS
canvas_img.src = obj.attr('src');
//console.log(canvas_img.src);
var matrix = getObjMatrix(obj);
matrix = matrix.substring(7,matrix.length-1).split(', ');
canvas_img.onload = function(){
//console.log('onload');
ctx.save();
ctx.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
ctx.drawImage(canvas_img, 0, 0);
ctx.restore();
putAnotherElementToCanvas();
}
/* $.ajax({
type: 'POST',
url: 'data/imagedata.php',
data: {'imgurl': obj.attr('src')},
success: function(_data){
var imagedata = 'data:image/png;base64,' + _data;
canvas_img.src = imagedata;
canvas_img.onload = function(){
ctx.save();
ctx.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
ctx.drawImage(canvas_img, 0, 0);
ctx.restore();
putAnotherElementToCanvas();
}
},
error: function(xhr, textstatus){
////console.log(textstatus);
}
});*/
} else if(type == 'txt'){
ctx.save();
var matrix = getObjMatrix(obj);
matrix = matrix.substring(7,matrix.length-1).split(', ');
ctx.setTransform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
ctx.fillStyle = obj.css('background-color');
ctx.fillRect(0, -7, obj.width(), obj.height());
ctx.fillStyle = obj.css('color');
ctx.font = (obj.css('font-size') + ' ' + obj.css('font-family')).toString();
ctx.textAlign = obj.css('text-align');
var xpos;
if(obj.css('text-align') == 'left'){
xpos = matrix[4];
} else if(obj.css('text-align') == 'center'){
xpos = Number(matrix[4]) + (obj.width()*matrix[0])/2;
} else if(obj.css('text-align') == 'right'){
xpos = Number(matrix[4]) + (obj.width()*matrix[0]);
}
ctx.setTransform(matrix[0], matrix[1], matrix[2], matrix[3], xpos, matrix[5]);
var lh = obj.css('font-size').replace('px', '')*1.2;
wrapText(ctx, obj.text(), 0, lh/2, obj.width()+25, lh);
ctx.restore();
putAnotherElementToCanvas();
}
}
function putAnotherElementToCanvas(){
canvasCounter++;
console.log(canvasCounter+ ' - ' +elementArr.length)
if(canvasCounter < elementArr.length){
htmlToCanvas(elementArr[canvasCounter].type, elementArr[canvasCounter].imgobj);
} else {
postCanvas();
}
}
function postCanvas()
{
var tempCanvas = document.createElement('canvas');
tempCanvas.width = cnvs.width;
tempCanvas.height = cnvs.height;
tempCanvas.getContext('2d').drawImage(cnvs, 0, 0);
// cnvs.width = 170;
// cnvs.height = 102;
cnvs.getContext('2d').drawImage(tempCanvas, 0, 0, tempCanvas.width, tempCanvas.height, 0, 0, cnvs.width, cnvs.height);
$.isFunction(callback.complete) && callback.complete.call(_this);
canvas.remove();
}
function wrapText(context, text, x, y, maxWidth, lineHeight) {
var words = text.split(' ');
var line = '';
for(var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = context.measureText(testLine);
var testWidth = metrics.width;
if(testWidth > maxWidth) {
context.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
}
else {
line = testLine;
}
}
context.fillText(line, x, y);
}
function getObjMatrix(obj) {
var matrix = obj.css("-webkit-transform") ||
obj.css("-moz-transform") ||
obj.css("-ms-transform") ||
obj.css("-o-transform") ||
obj.css("transform");
return matrix;
}
}) (jQuery);
uma
Atualizado com imagem de fundo e gráficos SVG.
// Html no Canvas e salvando a imagem no backend
(função ($) {
var canvasCounter = 0;
var canvas, cnvs, ctx, elementArr, callback, _this;
$.fn.htmlToCanvas = function(options) {
var defaults = {
width: 1000,
height: 600,
complete: null
};
callback = $.extend(defaults, options);
_this = this;
return this.each(function() {
createImage('#' + $(this)[0].id);
});
}
$.fn.htmlToCanvas.toBinrary = function() {
return cnvs.toDataURL("image/jpeg", 1);
}
$.fn.htmlToCanvas.removeCanvas = function() {
canvas.remove();
}
function createImage(divobj) {
if (canvas) canvas.remove();
canvas = $('<canvas id="canvas" width="' + callback.width + '" height="' + callback.height + '" style="display: block;"></canvas>');
$('body').append(canvas);
cnvs = document.getElementById('canvas')
ctx = cnvs.getContext("2d");
ctx.fillStyle = $(divobj).css('background-color');
ctx.fillRect(0, 0, callback.width, callback.height);
canvasCounter = 0;
elementArr = [];
$(divobj + " img").each(function(index) {
elementArr.push({
type: 'img',
zindex: $(this).css('z-index'),
imgobj: $(this)
});
});
$(divobj + " div.text-field").each(function(index) {
elementArr.push({
type: 'txt',
zindex: $(this).css('z-index'),
imgobj: $(this)
});
});
/*======================== for svg rendar pm7014.10.15 ========================*/
$(divobj + " div.hotsPot svg").each(function(index) {
elementArr.push({
type: 'svg',
zindex: $(this).parent().css('z-index'),
imgobj: $(this)
});
});
/*======================== for svg rendar End pm7014.10.15 ========================*/
elementArr.sort(function(a, b) {
var dif = Number(a.zindex - b.zindex);
return (dif);
});
//--------- background images ----------
if ($(divobj).css('background-image') != 'none') {
var background = new Image();
var back_source = $(divobj).css('background-image');
back_source = back_source.substring(4, back_source.length - 1);
back_source = back_source.replace('"', '');
back_source = back_source.replace('"', '');
background.crossOrigin = "*"; // This enables CORS
background.src = back_source;
background.onload = function() {
for (var w = 0; w < canvas.attr('width'); w += background.width) {
for (var h = 0; h < canvas.attr('height'); h += background.height) {
ctx.drawImage(background, w, h);
}
}
if (elementArr.length > 0) {
htmlToCanvas(elementArr[canvasCounter].type, elementArr[canvasCounter].imgobj);
} else {
postCanvas();
}
}
} else {
if (elementArr.length > 0) {
htmlToCanvas(elementArr[canvasCounter].type, elementArr[canvasCounter].imgobj);
} else {
postCanvas();
}
}
}
function htmlToCanvas(type, obj) {
if (type == 'img') {
var canvas_img = new Image();
canvas_img.crossOrigin = "*"; // This enables CORS
canvas_img.src = obj.attr('src');
var matrix = getObjMatrix(obj);
matrix = matrix.substring(7, matrix.length - 1).split(', ');
canvas_img.onload = function() {
ctx.save();
ctx.transform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
ctx.drawImage(canvas_img, 0, 0);
ctx.restore();
putAnotherElementToCanvas();
}
} else if (type == 'txt') {
ctx.save();
var matrix = getObjMatrix(obj);
matrix = matrix.substring(7, matrix.length - 1).split(', ');
ctx.setTransform(matrix[0], matrix[1], matrix[2], matrix[3], matrix[4], matrix[5]);
ctx.fillStyle = obj.css('background-color');
ctx.fillRect(0, -7, obj.width(), obj.height());
ctx.fillStyle = obj.css('color');
ctx.font = (obj.css('font-size') + ' ' + obj.css('font-family')).toString();
ctx.textAlign = obj.css('text-align');
var xpos;
if (obj.css('text-align') == 'left') {
xpos = matrix[4];
} else if (obj.css('text-align') == 'center') {
xpos = Number(matrix[4]) + (obj.width() * matrix[0]) / 2;
} else if (obj.css('text-align') == 'right') {
xpos = Number(matrix[4]) + (obj.width() * matrix[0]);
}
ctx.setTransform(matrix[0], matrix[1], matrix[2], matrix[3], xpos, matrix[5]);
var lh = obj.css('font-size').replace('px', '') * 1.2;
wrapText(ctx, obj.text(), 0, lh / 2, obj.width() + 25, lh);
ctx.restore();
putAnotherElementToCanvas();
/*======================== for svg rendar pm7014.10.15 ========================*/
} else if (type == 'svg') {
svgObj = setAttributes(obj);
var data = "data:image/svg+xml;base64," + window.btoa($(obj).parent().html());
var svg_img = new Image();
svg_img.src = data;
var svgMatrix = getObjMatrix(obj.parent());
svgMatrix = svgMatrix.substring(7, svgMatrix.length - 1).split(', ');
svg_img.onload = function() {
ctx.save();
ctx.transform(svgMatrix[0], svgMatrix[1], svgMatrix[2], svgMatrix[3], svgMatrix[4], svgMatrix[5]);
ctx.drawImage(svg_img, 0, 0);
ctx.restore();
putAnotherElementToCanvas();
};
}
/* ======================== for svg rendar pm7014.10.15 ======================== */
}
function setAttributes(el) {
el.attr("version", "1.1");
el.attr("xmlns", "http://www.w3.org/2000/svg");
el.attr("xmlns:xlink", "http://www.w3.org/1999/xlink");
return el;
}
function putAnotherElementToCanvas() {
canvasCounter++;
//console.log(canvasCounter+ ' - ' +elementArr.length)
if (canvasCounter < elementArr.length) {
htmlToCanvas(elementArr[canvasCounter].type, elementArr[canvasCounter].imgobj);
} else {
postCanvas();
}
}
function postCanvas() {
var tempCanvas = document.createElement('canvas');
tempCanvas.width = cnvs.width;
tempCanvas.height = cnvs.height;
tempCanvas.getContext('2d').drawImage(cnvs, 0, 0);
// cnvs.width = 170;
// cnvs.height = 102;
cnvs.getContext('2d').drawImage(tempCanvas, 0, 0, tempCanvas.width, tempCanvas.height, 0, 0, cnvs.width, cnvs.height);
$.isFunction(callback.complete) && callback.complete.call(_this);
canvas.remove();
}
function wrapText(context, text, x, y, maxWidth, lineHeight) {
var words = text.split(' ');
var line = '';
for (var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = context.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth) {
context.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
} else {
line = testLine;
}
}
context.fillText(line, x, y);
}
function getObjMatrix(obj) {
var matrix = obj.css("-webkit-transform") ||
obj.css("-moz-transform") ||
obj.css("-ms-transform") ||
obj.css("-o-transform") ||
obj.css("transform");
return matrix;
}
}) (jQuery);
rotação css e transformação não funcionam perfeitamente ... Eu tenho essas coisas no meu código
transformar: girar (-13deg);
índice z: 40;
. Quaisquer atualizações, por favor.
Eu usei a matriz para isso. tente este.
Na quinta-feira, 15 de outubro de 2015 às 13h57, Yo Yo [email protected] escreveu:
rotação css e transformação não funcionam perfeitamente ... Eu tenho essas coisas
no meu código
transformar: girar (-13deg);
índice z: 40;
. Quaisquer atualizações, por favor.-
Responda a este e-mail diretamente ou visualize-o no GitHub
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -148316296
.
_Observação: Estaremos de partida para Durga Puja
https://en.wikipedia.org/wiki/Durga_Puja férias de 20 a 23
Outubro._
Com os melhores votos
_Arindam Mojumder_
Líder de equipe HTML5 e jQuery
_Indus Net Technologies_ http://www.indusnet.co.in
Uma empresa com certificação ISO 9001: 2008 e ISO 27001: 2005
Gtalk: [email protected]
Mob: + 919830307843, + 918420200614
Telefone: + 91-33-32902857 / 23576070
Ligação gratuita (EUA e Canadá): + 1-888-652-2121
Reino Unido: + 44-020-81444070
Esta mensagem contém informações que podem ser privilegiadas ou confidenciais
e é propriedade da INDUS NET TECHNOLOGIES
http://www.indusnet.co.in/. Destina-se apenas à pessoa a quem
é endereçado. Se você não é o destinatário pretendido, você não está autorizado
para ler, imprimir, reter uma cópia, divulgar, distribuir ou usar esta mensagem
ou qualquer parte dele. Se você receber esta mensagem por engano, avise
o remetente imediatamente e exclua todas as cópias desta mensagem. INDUS NET
TECNOLOGIAS http://www.indusnet.co.in/ não aceita qualquer responsabilidade por
e-mails infectados por vírus.
@arindamm qual? você pode me enviar o arquivo atualizado.
@arindamm : Se você está falando sobre o código acima, então onde adicioná-lo exatamente.
já adicionado, verifique o arquivo js anexado no meu e-mail anterior.
Na quinta-feira, 15 de outubro de 2015 às 15:52, Yo Yo [email protected] escreveu:
@arindamm https://github.com/arindamm : Se você está falando sobre o
acima do código do que onde adicioná-lo exatamente.-
Responda a este e-mail diretamente ou visualize-o no GitHub
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -148344194
.
_Observação: Estaremos de partida para Durga Puja
https://en.wikipedia.org/wiki/Durga_Puja férias de 20 a 23
Outubro._
Com os melhores votos
_Arindam Mojumder_
Líder de equipe HTML5 e jQuery
_Indus Net Technologies_ http://www.indusnet.co.in
Uma empresa com certificação ISO 9001: 2008 e ISO 27001: 2005
Gtalk: [email protected]
Mob: + 919830307843, + 918420200614
Telefone: + 91-33-32902857 / 23576070
Ligação gratuita (EUA e Canadá): + 1-888-652-2121
Reino Unido: + 44-020-81444070
Esta mensagem contém informações que podem ser privilegiadas ou confidenciais
e é propriedade da INDUS NET TECHNOLOGIES
http://www.indusnet.co.in/. Destina-se apenas à pessoa a quem
é endereçado. Se você não é o destinatário pretendido, você não está autorizado
para ler, imprimir, reter uma cópia, divulgar, distribuir ou usar esta mensagem
ou qualquer parte dele. Se você receber esta mensagem por engano, avise
o remetente imediatamente e exclua todas as cópias desta mensagem. INDUS NET
TECNOLOGIAS http://www.indusnet.co.in/ não aceita qualquer responsabilidade por
e-mails infectados por vírus.
@arindamm @niklasvh , vocês têm uma atualização sobre esse problema? Estou tentando alinhar algum texto verticalmente e não sai direito. Funciona bem no IE 11, mas não funciona no IE 9.
desculpa.
Na segunda-feira, 19 de outubro de 2015 às 15:45, Ranga [email protected] escreveu:
@arindamm https://github.com/arindamm @niklasvh
https://github.com/niklasvh vocês têm uma atualização sobre esse problema?
Estou tentando alinhar algum texto verticalmente e não sai direito.
Funciona bem no IE 11, mas não funciona no IE 9.-
Responda a este e-mail diretamente ou visualize-o no GitHub
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -149174708
.
_Observação: Estaremos de partida para Durga Puja
https://en.wikipedia.org/wiki/Durga_Puja férias de 20 a 23
Outubro._
Com os melhores votos
_Arindam Mojumder_
Líder de equipe HTML5 e jQuery
_Indus Net Technologies_ http://www.indusnet.co.in
Uma empresa com certificação ISO 9001: 2008 e ISO 27001: 2005
Gtalk: [email protected]
Mob: + 919830307843, + 918420200614
Telefone: + 91-33-32902857 / 23576070
Ligação gratuita (EUA e Canadá): + 1-888-652-2121
Reino Unido: + 44-020-81444070
Esta mensagem contém informações que podem ser privilegiadas ou confidenciais
e é propriedade da INDUS NET TECHNOLOGIES
http://www.indusnet.co.in/. Destina-se apenas à pessoa a quem
é endereçado. Se você não é o destinatário pretendido, você não está autorizado
para ler, imprimir, reter uma cópia, divulgar, distribuir ou usar esta mensagem
ou qualquer parte dele. Se você receber esta mensagem por engano, avise
o remetente imediatamente e exclua todas as cópias desta mensagem. INDUS NET
TECNOLOGIAS http://www.indusnet.co.in/ não aceita qualquer responsabilidade por
e-mails infectados por vírus.
@arindamm @niklasvh : olá, senhor, estouro: oculto e margem esquerda: -42px; não está sendo aplicado às minhas imagens. Por favor, me encaminhe uma solução ou você pode atualizar o arquivo. Por favor.
Eu não trabalhei nessa parte. Lamento dizer que não posso ajudar. você pode fazer o seu
própria função e recortar a imagem pela função canvas.draw ().
Na quinta-feira, 29 de outubro de 2015 às 11h12, Yo Yo [email protected] escreveu:
@arindamm https://github.com/arindamm @niklasvh
https://github.com/niklasvh : olá senhor, estouro: oculto não é
sendo aplicado às minhas imagens. Por favor, me indique uma solução ou você pode, por favor
atualize o arquivo. Por favor.-
Responda a este e-mail diretamente ou visualize-o no GitHub
https://github.com/niklasvh/html2canvas/issues/220#issuecomment -152082507
.
Com os melhores votos
_Arindam Mojumder_
Líder de equipe HTML5 e jQuery
_Indus Net Technologies_ http://www.indusnet.co.in
Uma empresa com certificação ISO 9001: 2008 e ISO 27001: 2005
Gtalk: [email protected]
Mob: + 919830307843, + 918420200614
Telefone: + 91-33-32902857 / 23576070
Ligação gratuita (EUA e Canadá): + 1-888-652-2121
Reino Unido: + 44-020-81444070
Esta mensagem contém informações que podem ser privilegiadas ou confidenciais
e é propriedade da INDUS NET TECHNOLOGIES
http://www.indusnet.co.in/. Destina-se apenas à pessoa a quem
é endereçado. Se você não é o destinatário pretendido, você não está autorizado
para ler, imprimir, reter uma cópia, divulgar, distribuir ou usar esta mensagem
ou qualquer parte dele. Se você receber esta mensagem por engano, avise
o remetente imediatamente e exclua todas as cópias desta mensagem. INDUS NET
TECNOLOGIAS http://www.indusnet.co.in/ não aceita qualquer responsabilidade por
e-mails infectados por vírus.
você pode fazer uma solução alternativa que é explicada aqui:
http://www.jjoe64.com/2015/10/html2canvas-and-css-transform-rotate.html
@ jjoe64 https://github.com/niklasvh/html2canvas/issues/209#issuecomment -152904727
Supondo que isso ainda não tenha sido examinado.
Tipo de translação necessária para trabalhar para alinhamento vertical (seria de se esperar que fosse uma implementação simples, mas obviamente não).
👍
img = document.createElement("img")
img.src = canvas.toDataURL()
newCanvas = document.createElement('canvas')
ctx = newCanvas.getContext("2d")
newCanvas.height = 350
newCanvas.width = 200
ctx.translate(185, 35)
ctx.rotate(90 * Math.PI/180)
ctx.drawImage(img,0,0); #draw it
canvasURL = newCanvas.toDataURL()
De html2canvas, obtenho o canvas. Em seguida, uso o javascript acima para criar um newCanvas que é girado em 90 graus.
use a propriedade height, width, translate de acordo com seu caso de uso
O CSS3 do box-shadow não está funcionando? Mesmo assim, obrigado
As transformações são parcialmente suportadas em 1.0.0
@niklasvh Alguma informação sobre exatamente quais transformações são ou não suportadas?
girar parece não funcionar
Comentários muito úteis
@liteelips para mim também, eu também preciso de rotação de texto :(