var ImagePlayer = function(options) { this.control = options.control; this.image = options.image; this.STOP_TEXT = '停止'; this.PLAY_TEXT = '开始'; this.drawFirstFrame = function() {}; this.stop = function() { if (!this.baseUrl) { this.baseUrl = this.image.src; } var canvas = document.createElement('canvas'); var width = this.image.width; var height = this.image.height; if (width && height) { canvas.width = width; canvas.height = height; canvas.getContext('2d').drawImage(this.image, 0, 0, width, height); try { this.firstFrame = canvas.toDataURL('image/gif'); } catch (e) { this.image.removeAttribute('src'); canvas.style.position = 'absolute'; this.image.parentElement.insertBefore(canvas, this.image); this.image.style.opacity = '0'; this.storeCanvas = canvas; } } }; this.play = function() { if (this.storeCanvas) { this.storeCanvas.parentElement.removeChild(this.storeCanvas); this.storeCanvas = null; this.image.style.opacity = ''; } if (this.baseUrl) { this.image.src = this.baseUrl; } }; this.handleControl = function() { if (this.control.value === this.STOP_TEXT) { this.stop(); this.control.value = this.PLAY_TEXT; } else { this.play(); this.control.value = this.STOP_TEXT; } }; this.initEvent = function() { this.control.addEventListener('click', this.handleControl.bind(this), false); }; this.init = function() { this.initEvent(); }; this.init();};