HTML5教程咨询：个人微信头像设置为分享截图是如何实现的？

2023-03-04 11:35:02html-css09

HTML5教程咨询：个人微信头像设置为分享截图是如何实现的？,第1张

这个功能我有在一个叫iH5的工具上试过，步骤如下：

首先，添加一个文本和变量，并将两者绑定。

其次，添加一张图片，在舞台下添加事件，触发条件为“初始化完成”，目标对象选择“舞台.图片1”，目标动作选择“获取微信头像”。

接着要加两个透明按钮，第一个按钮是用于获取属性的（就是说点击按钮1可以获取图片的资源位置），在按钮1下添加事件，事件的目标对象选为“舞台.图片1”，目标动作选择“获取属性”，第一个属性名字选择“资源位置”，第二个属性名字选择“舞台.变量1”。第二个按钮是用于设定截图的（点击按钮2，可以设置截图的位置），在按钮2下添加事件，事件的目标对象选择“舞台”，目标动作选择“微信设定截图”，资源位置设为“$+变量名称”。

如此设置，转发后就可以看到个人微信头像变成了分享截图。希望我的回答对你有帮助。

1. 项目背景

网站项目基于HTML5+AngularJs开发，正在做一个由HTML5调用摄像头拍照，从而实现修改头像的功能。起初觉得HTML5拍照很简单，但是做的时候才发现HTML5获取摄像头并不是那么容易。

2. 如何调用摄像头

$scope.photoErr = false

$scope.photoBtnDiable = true

var mediaStream = null,track = null

navigator.getMedia = (navigator.getUserMedia ||

navigator.webkitGetUserMedia || navigator.mozGetUserMedia ||

navigator.msGetUserMedia)

if (navigator.getMedia) {

navigator.getMedia(

{

video: true

// successCallback

function (stream) {

var s = window.URL.createObjectURL(stream)

var video = document.getElementById('video')

video.src = window.URL.createObjectURL(stream)

mediaStream = stream

track = stream.getTracks()[0]

$scope.photoBtnDiable = false $scope.$apply()

// errorCallback

function (err) {

$scope.errorPhoto()

console.log("The following error occured:" + err)

})

} else {

$scope.errorPhoto()

}

代码解析：

navigator为浏览器对象，包含浏览器的信息，这里就是用这个对象打开摄像头。$scope为AndularJs语法。第一步声明navigator.getMedia来调用浏览器不同的打开摄像头函数，目前仅有getUserMedia、webkitGetUserMedia、mozGetUserMedia、msGetUserMedia四种方式分别对应通用浏览器、Google浏览器、火狐浏览器和IE浏览器，浏览器会自动判断调用哪一个函数。第二步是调用打开浏览器，包含三个参数，分别为需要使用的多媒体类型、获取成功返回的流数据处理函数以及操作失败返回错误消息处理函数。其中，使用时不仅可以设置视频还能设置使用麦克风，设置方式为：

{

video: true，

audio: true

}

调用成功即打开摄像头后返回视频流数据，我们可以将流数据设置到video标签在界面上实时显示图像。mediaStream用来记录获取到的流数据，track在Chrome浏览器中用来跟踪摄像头状态，这两个变量都能用来关闭摄像头。

3. 拍照

$scope.snap = function () {

var canvas = document.createElement('canvas')

canvas.width = "400"

canvas.height = "304"

var ctx = canvas.getContext('2d')

ctx.drawImage(video, 0, 0, 400, 304)

$scope.closeCamera()

$uibModalInstance.close(canvas.toDataURL("image/png"))

}

拍照时需要使用到canvas标签，创建一个canvas标签，设置我们需要拍照的尺寸大小，通过drawImage函数将video当前的图像保存到canvas标签，最后将图像数据转换为base64数据返回并关闭摄像头，这样就完成了我们的拍照功能。这里的$uibModalInstance对象是我们项目中打开弹出层的一个对象，用来控制弹出层的显示。

4. 如何关闭摄像头

$scope.closeCamera = function () {

if (mediaStream != null) {

if (mediaStream.stop) {

mediaStream.stop()

}

$scope.videosrc = ""

}

if (track != null) {

if (track.stop) {

track.stop()

}