canvas画布如何做到电子签名和全屏截图，附二进制流上传OSS方法丁晓林的博客

主要用到两个插件，jSignature和 html2canvas

demo代码：电子签名页面传送门

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</div>

<button class="btn">截全图为canvas</button>

<button class="btn1">保存全图为png</button>

<button class="btn2">本地下载全图</button>

<button class="btn3">上传全图到OSS</button>

<button class="btn4">从OSS下载全图</button>

var signurl=""//上传图片后的url

//截图

$('.btn').click(function(){

html2canvas(document.querySelector("#capture")).then(canvas => {

document.body.appendChild(canvas)});

})

$('.btn1').click(function(){

html2canvas(document.querySelector("#capture")).then(canvas => {

$("#qmimg").attr("src",canvas.toDataURL("image/png")); });

})

$('.btn2').click(function(){

html2canvas(document.querySelector("#capture")).then(canvas => {

downloadFile("本地图片下载", convertBase64UrlToBlob(canvas.toDataURL("image/png")));

})

$('.btn3').click(function(){

html2canvas(document.querySelector("#capture")).then(canvas => {

uploadFile1( convertBase64UrlToBlob(canvas.toDataURL("image/png")));

})

$('.btn4').click(function(){

saveFile(signurl)

})

//签名

$(function() {

var $sigdiv = $("#signature");

$sigdiv.jSignature({width:400,height:200,color:"#000",lineWidth:2,"background-color":"#ddd"});

$("#yes").click(function(){

//将画布内容转换为图片

var datapair = $sigdiv.jSignature("getData", "image");

var i = new Image();

i.src = "data:" + datapair;

$(i).appendTo($("#someelement")); // append the image (SVG) to DOM.

});

$("#reset").click(function(){

$sigdiv.jSignature("reset"); //重置画布，可以进行重新作画.

$("#someelement").html("");

});

// 监听是否签名

$sigdiv.bind('change', function(e){

var native=$sigdiv.jSignature("getData","native");

console.log(native.length,native);

if(native.length == 0){

$('#reset').attr('disabled',true);

}else{

$('#reset').removeAttr('disabled');

}

})

});

//二进制流上传给后台

function uploadFile(fileName, blob){

if(blob.size>0){

var reader = new FileReader();

var formData = new FormData();

formData.append('blob',blob, this. filename);

var xhr = new XMLHttpRequest();

xhr.upload.onprogress=(e)=>{

this.percentage = Math.round((e.loaded * 100) / e.total)+'%';

$('.progress-bar').width(this.percentage);

}

xhr.withCredentials = true; //支持跨域发送cookies

xhr.open("POST", "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx");

reader.onload = (e)=>{

xhr.send(formData);

};

xhr.onreadystatechange = ()=>{

if(xhr.readyState == 4 && xhr.status===200){

}else{

}

}else{

alert('电子签名生成失败')

}

//二进制流上传给OSS

function uploadFile1(blob){

if(blob.size>0){

var reader = new FileReader();

// blob转arrayBuffer

var reader = new FileReader();

reader.readAsArrayBuffer(blob);

reader.onload = function (event) {

// 配置OSS

var client = new OSS.Wrapper({

region: 'oss-cn-beijing',

accessKeyId: 'LTAIOZT53Uu0ykZO',

accessKeySecret: 'TYxjx2Icu7zjbxQ7LstQewJ6ZlLMZR',

bucket: 'sinostoragedev1'

});

// 文件名

var date = new Date().toLocaleDateString().replace(/\//g,'-');

var storeAs = 'signfiles/'+date+'/'+guidGenerate()+'.'+blob.type.split('/')[1];

// arrayBuffer转Buffer

var buffer = new OSS.Buffer(event.target.result);

// 上传

client.put(storeAs, buffer).then((result)=>{

console.log(result);

/* e.g. result = {

name:"signfiles/2018-4-12/D6234BBD-A267-248E-FD2A-A46AB327262C.png"

res:{status: 200, statusCode: 200, headers: {…}, size: 0, aborted: false, …}

url:"http://sinostoragedev1.oss-cn-beijing.aliyuncs.com/signfiles/2018-4-12/D6234BBD-A267-248E-FD2A-A46AB327262C.png"

} */

if(result.res.statusCode=="200"){

alert("上传成功,url:"+result.url);

signurl=result.url

// location.href=signurl;

}

}).catch((err)=>{

console.log(err);

});

}

// 图片ID生成

function guidGenerate() {

return 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {

var r = Math.random() * 16 | 0,

v = c == 'x' ? r : (r & 0x3 | 0x8);

return v.toString(16);

}).toUpperCase();

}

//从OSS下载

function saveFile(url) {

var filename = url.substring(url.lastIndexOf("/") + 1);

console.log(url,filename);

var xhr = new XMLHttpRequest();

xhr.responseType = 'blob';

xhr.onload = function () {

var a = document.createElement('a');

a.href = window.URL.createObjectURL(xhr.response);

a.download = filename;

a.style.display = 'none';

document.body.appendChild(a);

a.click();

a=null;

};

xhr.open('GET', url);

xhr.send();

}

//本地下载

function downloadFile(fileName, blob){

console.log('blob',blob,fileName,blob.size)

var Link = document.createElement('a');

var evt = document.createEvent("HTMLEvents");

// evt.initEvent("click", false, false);//initEvent 不加后两个参数在FF下会报错

Link.download = fileName;

Link.innerHTML = fileName;

Link.href = URL.createObjectURL(blob);

document.getElementsByTagName("body")[0].appendChild(Link);

// Link.dispatchEvent(evt);

Link.click();

}

/**

* 将以base64的图片url数据转换为Blob

* @param urlData

* 用url方式表示的base64图片数据

//blob

function convertBase64UrlToBlob(urlData){

var bytes=window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte

//处理异常,将ascii码小于0的转换为大于0

var ab = new ArrayBuffer(bytes.length);

var ia = new Uint8Array(ab);

for (var i = 0; i < bytes.length; i++) {

ia[i] = bytes.charCodeAt(i);

}

return new Blob( [ab] , {type : 'image/png'});

}

</script>

</body>

</html>