Printscreen ao entrar na página
Estou precisando de um script na qual, quando eu entrar na página ele tira um printscreen e salva num direitorio da hospedagem. Alguem poderia me dar um NORTE pois estou sem saber como posso começar se é que existe uma forma para isso.... Explicando o que precisaria. Eu tenho uma query em sql que me traz alguns resultados em forma de tabela, com nome, avatar, estas coisas, porém ele tem uma imagem de fundo e as informações são inseridas em cima desta imagem. Então o usuario teria a possibilidade de salvar esta imagem com estas informações, por isso o jeito mais facil que eu acho que seria, era de tirar um print desta tabela 300x200 pixel. Vocês tem alguma outra sugestão? Poderia ser igual deste site tambem, onde ele poe o usuario clica no botão gerar ele gera a magem com as informações: http://www.xboxgamertag.com/gamercard/ eu estou pesquisando e encontrei algo a respeito de html5 e canvas, mas não conheço esta linguagem. estou tentando adaptar mas sem sucesso, alguem poderia me ajudar? estou usando esta biblioteca: https://github.com/hongru/canvas2image (tem exemplo tambem)
como eu faço para aonde ta o quadrado vermelho por tabelas em html, de todo jeito que ponho ele nao mostra nada. o **function draw () **é o que escreve o quadro vermelho, mas como substituir pra por tabela. Porque assim quando eu clicar no botão salvar ele salva a imagem conforme o que tem ali dentro <!doctype html><html><meta charset="utf-8" /><script src="canvas2image.js"></script><style>.doc { width: 604px. margin: 0 auto. } canvas { display: block. border: 2px solid #888. }</style><body><div class="doc"> <canvas width="600" height="400" id="cvs"></canvas> <div> <p> <button id="save">save</button> or <button id="convert">convert to</button> as: <select id="sel"> <option value="png">png</option> <option value="jpeg">jpeg</option> <option value="bmp">bmp</option> </select><br/> width: <input type="number" value="300" id="imgW" /><br/> height: <input type="number" value="200" id="imgH" /> </p> </div> <div id="imgs"> </div></div><script> var canvas, ctx, bMouseIsDown = false, iLastX, iLastY, $save, $imgs, $convert, $imgW, $imgH, $sel. function init () { canvas = document.getElementById('cvs'). ctx = canvas.getContext('2d'). $save = document.getElementById('save'). $convert = document.getElementById('convert'). $sel = document.getElementById('sel'). $imgs = document.getElementById('imgs'). $imgW = document.getElementById('imgW'). $imgH = document.getElementById('imgH'). bind(). draw(). } function bind () { canvas.onmousedown = function(e) { bMouseIsDown = true. iLastX = e.clientX - canvas.offsetLeft + (window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft). iLastY = e.clientY - canvas.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop). } canvas.onmouseup = function() { bMouseIsDown = false. iLastX = -1. iLastY = -1. } canvas.onmousemove = function(e) { if (bMouseIsDown) { var iX = e.clientX - canvas.offsetLeft + (window.pageXOffset||document.body.scrollLeft||document.documentElement.scrollLeft). var iY = e.clientY - canvas.offsetTop + (window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop). ctx.moveTo(iLastX, iLastY). ctx.lineTo(iX, iY). ctx.stroke(). iLastX = iX. iLastY = iY. } }. $save.onclick = function (e) { var type = $sel.value, w = $imgW.value, h = $imgH.value. Canvas2Image.saveAsImage(canvas, w, h, type). } $convert.onclick = function (e) { var type = $sel.value, w = $imgW.value, h = $imgH.value. $imgs.appendChild(Canvas2Image.convertToImage(canvas, w, h, type)) } } function draw () { ctx.fillStyle = '#ffffff'. ctx.fillRect(0, 0, 600, 400). ctx.fillStyle = 'red'. ctx.fillRect(100, 100, 50, 50). } onload = init. </script></body></html>Discussão (4)
Carregando comentários...