我有一个功能,允许用户通过相机拍照或从相册中获取现有照片并将其保存在应用程序的临时文件夹中,然后将照片路径提供给HTML5画布,其中包含webview ,作为画布的背景图片。
如果从相册中取出图像,一切都很好。然而,当我从相机拍摄照片时,画布有非常奇怪的行为,每次我在画布上绘制(检测触摸,触摸移动和触摸事件),背景图像的新部分(相同的图像在画布顶部添加了背景),可以在触摸移动时展开。这个问题发生在每次触地事件时。以下是该问题的屏幕截图。
通过相机拍照: original photo
触摸并移动后,顶部会出现一个新的背景图片: after touch once screenshot
以下是拍照并保存在本地临时文件夹中的代码:
- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info
{
[picker dismissViewControllerAnimated:YES completion:nil];
if (popoverController) {
[popoverController dismissPopoverAnimated:YES];
popoverController = nil;
}
//the target path which the image would be saved
NSString *targetPath = [NSString stringWithFormat:@"%@%@.jpg",NSTemporaryDirectory(),[CMSCommonMethods ConvertToTimeWithMilSecondsFormat:[NSDate date]]];
UIImage *image = info[UIImagePickerControllerOriginalImage];
//write the image
if ([CMSCommonMethods writeImage:image toPath:targetPath replace:YES]) {
NSArray *pathComponents = [targetPath pathComponents];
//call the webview set the background image according to the path
[self.reactionDrawingView setBackgroundLayerImage:[NSString stringWithFormat:@"../%@/%@",pathComponents[pathComponents.count-2],pathComponents[pathComponents.count-1]]];
}
}
用于设置背景图片的HTML代码
function changeBackgroundImage(image)
{
//canvas id is sketchpad
document.getElementById("sketchpad").style.backgroundImage = "url("+image+")";
}
为什么会出现这个问题?