You can't render a Visualforce into an image. There is no standard mechanism available from Salesforce. But there are many JavaScript libraries available using which you can take a screenshot of a web page. One such library is html2canvas you can check the example page to see the implementation. After converting the page to an image you can upload it to the Salesforce document folder.
Update
You can use the toDataURL
method to convert the screenshot to a base64 image data and save it using a remote method. the code should be something as below. Please note this is not a compiled code, some fixes may be required.
JavaScript
$('#screenshot').click(function () {
html2canvas($('body,html'), {
onrendered: function (canvas) {
var imgData = canvas.toDataURL('image/png').split(',')[1];
SaveImage.saveImage('001i000000gDY4Z',imgData,handleResult); //
}
});
});
function handleResult(result,event) {
if(result.success) {
alert('Screenshot attached');
} else {
alert('Error: '+result.errorMessage);
}
}
Controller
public with sharing class SaveImage {
@RemoteAction public static RemoteSaveResult saveImage(Id parID, String imageBody) {
Attachment a = new Attachment(ParentId=parID, name='Image.png', ContentType='image/png', Body=EncodingUtil.base64Decode(imageBody));
Database.saveResult result = Database.insert(a,false);
RemoteSaveResult newResult = new RemoteSaveResult();
newResult.success = result.isSuccess();
newResult.attachmentId = a.Id;
newResult.errorMessage = result.isSuccess()?'':result.getErrors()[0].getMessage();
return newResult;
}
}