利用html2canvas截屏后可以生成base64類型的圖片，但是這樣的圖片很明顯不能被引用或者被SNS工具來分享。這樣就必須截屏后再上傳數(shù)據(jù)到后臺服務(wù)器端重新保存。
前端js代碼：
- $("#saveImage").click(function() {
- html2canvas($('#mypics'), {
- onrendered : function(canvas) {
- var myImage = canvas.toDataURL("image/jpeg");
- //并將圖片上傳到服務(wù)器用作圖片分享
- $.ajax({
- type : "POST",
- url : '${ctx}/qsupload',
- data : {data:myImage},
- timeout : 60000,
- success : function(data){
- $('#myShowImage').attr('src', '${ctxStatic}/usertemp/'+data+'.jpg'); //服務(wù)器上保存圖片路徑，data是返回的文件名。
- }
- });
- }
- });
- });
后端代碼
- import org.apache.commons.codec.binary.Base64;
-
- @RequestMapping(value = { "${frontPath}/qsupload" }, method = { RequestMethod.POST })
- @ResponseBody
- public String petUpgradeTarget(HttpServletRequest request, String data) {
- String serverPath = request.getSession().getServletContext()
- .getRealPath("/");
- Base64 base64 = new Base64();
- try {
-
- //注意點：實際的圖片數(shù)據(jù)是從 data:image/jpeg;base64, 后開始的
- byte[] k = base64.decode(data.substring("data:image/jpeg;base64,"
- .length()));
- InputStream is = new ByteArrayInputStream(k);
- String fileName = UUID.randomUUID().toString();
- String imgFilePath = serverPath + "\\static\\usertemp\\" + fileName + ".jpg";
-
- //以下其實可以忽略，將圖片壓縮處理了一下，可以小一點
-
- double ratio = 1.0;
- BufferedImage image = ImageIO.read(is);
- int newWidth = (int) (image.getWidth() * ratio);
- int newHeight = (int) (image.getHeight() * ratio);
- Image newimage = image.getScaledInstance(newWidth, newHeight,
- Image.SCALE_SMOOTH);
- BufferedImage tag = new BufferedImage(newWidth, newHeight,
- BufferedImage.TYPE_INT_RGB);
- Graphics g = tag.getGraphics();
- g.drawImage(newimage, 0, 0, null);
- g.dispose();
- ImageIO.write(tag, "jpg", new File(imgFilePath));
- return fileName;
- } catch (Exception e) {
- return "error";
- }
- }
|
