灵域,完美世界txt全集下载

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

html2canvas保存網(wǎng)頁截圖圖片不顯示怎么辦-創(chuàng)新互聯(lián)

這篇文章將為大家詳細講解有關html2canvas保存網(wǎng)頁截圖圖片不顯示怎么辦，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司專注于陵城企業(yè)網(wǎng)站建設,響應式網(wǎng)站開發(fā),成都做商城網(wǎng)站。陵城網(wǎng)站建設公司,為陵城等地區(qū)提供建站服務。全流程按需網(wǎng)站建設，專業(yè)設計，全程項目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務

## 問題描述：兩張圖片，一張是用戶上傳的圖片，另一張是模板圖，中間是透明的，可以制作相框，并保存。使用html2canvas對兩個img標簽進行截圖。在寫demo的時候html2canvas沒有報錯但是所截的是空白，若換成文字就可以。
## 原因分析：找了半天才知道，如果截圖部分包含圖片的話，程序必須放在服務器下面進行，不然的話就是空圖片。
- It will not work if you run this html file without any web server . 
If you are playing around on your PC then install XAMPP or any     
other web server (Easiest option http://www.apachefriends.org/en/xampp.html) and put the image ,
JavaScript and HTML code in C:\xampp\htdocs (if C dirive is your installation drive) and run using the server.
I have tested it in Chrome and its working.
##代碼實例"


 
 
Document 
 
 
 
img{ width: 500px; height: 300px; position: fixed; } #p1{ height: 500px; width: 100%; } 
#p2{ position: fixed; bottom: 0; background: red; }
   
 
 
 html2canvas($('#p1'), 
{   
 onrendered: function(canvas) 
 {      
 var oImgPNG = Canvas2Image.saveAsPNG(canvas, true);       
 $('#p1').hide();      
 $('#p2').html(oImgPNG);   
 },   
 width: 500,   
 height: 500 });
 "
 ## 效果展示- 沒有服務器谷歌瀏覽器下![沒有服務器谷歌瀏覽器下]
 (/tupian/20230522/404.html
 - 沒有服務器火狐瀏覽器下![沒有服務器火狐瀏覽器下]
 (/tupian/20230522/404.html
 ## 說明只要火狐瀏覽器下可以顯示圖片就可以說明程序幾乎沒有問題O(∩_∩)O哈哈~

關于“html2canvas保存網(wǎng)頁截圖圖片不顯示怎么辦”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

分享文章：html2canvas保存網(wǎng)頁截圖圖片不顯示怎么辦-創(chuàng)新互聯(lián)
文章地址：http://fisionsoft.com.cn/article/jejhe.html

新聞中心

其他資訊