想截取瀏覽器上內容，並做成圖片保存到本地。
可以使用html2canvas.js進行操作。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="~/Jquery/jquery-1.10.2.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
</head>
<body>
@*原始圖片*@
<div class="my-div">
<img style="width: 400px; height: 300px" src="~/Img/longmao.jpg" />
</div>
<br />
<input type="button" onclick="set()" value="截圖" />
@*截取后存放圖片的位置*@
<img id="img" />
<script>
function set() {
//要轉換為圖片的dom對象
var element = document.querySelector('.my-div');
//要顯示圖片的img標簽
var image = document.querySelector('#img');
//調用html2image方法
html2image(element, image);
function html2image(element, image) {
html2canvas(element).then(function (canvas) {
var imageData = canvas.toDataURL(1);
//此時圖片已經可以顯示了
image.src = imageData;
});
}
}
</script>
</body>
</html>
把數據傳入后台，將圖片保存到本地。傳輸后台的數據是Base64的數據，需要轉換
public string Set(string imgdata)
{
try
{
var strbase64 = imgdata;
string dummyData = strbase64.Trim().Replace("data:image/png;base64,", "").Replace("%", "").Replace(",", "").Replace(" ", "+");
if (dummyData.Length % 4 > 0)
{
dummyData = dummyData.PadRight(dummyData.Length + 4 - dummyData.Length % 4, '=');
}
byte[] arr = Convert.FromBase64String(dummyData);
MemoryStream ms = new MemoryStream(arr);
Bitmap bmp = new Bitmap(ms);
var imagePath = AppDomain.CurrentDomain.BaseDirectory + "123.png";
bmp.Save(imagePath, System.Drawing.Imaging.ImageFormat.Png);
ms.Close();
}
catch (Exception ex)
{
Console.WriteLine(ex);
return TAjaxCallBack.ERROR;
}
}